こちらは、Design Cuts海外サイトのライブセッションで公開した、デザイナー兼起業家という二足のわらじを履くWooly ProntoことAddie Hanson(アディー ハンソン)氏によるProcreateチュートリアルライブ配信を文字起こししたものです。動画内では、彼女が実践しながら説明するデモンストレーション形式になっているので、デザイナーの技を盗める貴重なチャンスとなっております!

このセッションでは、Procreateで可愛いイラストと共に、シームレスパターンを作成する方法をご紹介します。
Addieの目標は、多くのデザイナーが作ることのプロセスへの情熱を育むことを支援することです。そして、彼女はこのチュートリアルでそれを実践しています。デザイナーによって手取り足取り教えてもらえる価値あるレッスンが待っています!

こちらの無料素材も合わせてご利用頂けます!

また、このProcreateチュートリアルでは、Dirty Halftones BrushSet & Video TutorialsThe Instant Artist Procreate Brushes and Stampsを使用して、おしゃれで可愛いイラストの描き方も習得していきます。身につけておきたいデザイナー直々の使い方講座、必見です!

 

- このチュートリアルで使用の商品 -

【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoDirty Halftones BrushSet & Video Tutorials【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoThe Big Procreate Print Pack【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoSketch Markers for Procreate【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoFolksy Florals Drawing Templates【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoThe Instant Artist Procreate Brushes and Stamps

1. 始める前に

Addieによるこちらの無料素材のファイル内には、この講座で使えるプリメイドのキャンバスが用意されています。
はじめに、空白のキャンバスを設定する方法をお見せします。

ギャラリーより+を押して標準の正方形のキャンバスサイズを選択しましょう、サイズは2048 x 2048 pixelsの300dpiになります。
Procreateは主に絵を描くプログラムであるため、通常パターンを作成するときに必要ないくつかのツール(たとえば、整列ツール)が不足しています。
でも安心してください。いくつかの工夫を凝らすことで、配置を見積もる必要なしに、永遠に繰り返されるシームレスなパターンが作成できるようになります。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

2. キャンバスの設定

まず、カラーパレットよりお好きな色をドラッグして、画面全体を塗りつぶします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、変形ツールをタップします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

変形する前に、変形の設定画面より設定が[均一]になっていることを確認してください。これにより、縦横比が変わらずに変形ができます。自動的に[マグネット]がオンになり、所定の位置にピタリとはまることができます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

また、[補間]が[バイリニア法]に設定されていることも確認してください。これは基本的に、ピクセルを移動およびサイズ変更するときにピクセルがどのようにレンダリングされるかを決定します。
[バイリニア法]に設定すると、歪みを最小限に抑えられます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

変形の設定を確認したら、変形しましょう。右下の角をタップし、中央に向かってドラッグし、正方形が50%のサイズになるまで縮小します。繰り返しがシームレスになるパターンを作成するために、4分割された各象限を用意していきます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

そして、正方形が左上四隅に4分の1のサイズで収まったら、変形ツールをタップして変形ツールを終了します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、レイヤーパネルで正方形レイヤーを選択します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

これはいくつかの方法で行うことができます。方法その1 – レイヤーをタップしてサイドメニューを表示させ、[選択]をタップ。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

方法その2 – 対象のレイヤー上で2本の指で押し続けます。すると、レイヤーの内容が選択されます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

下に選択範囲のメニューが表示されたら、[保存と読み込み]>+をタップしてこの選択を保存します。[選択内容1]として保存されます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

左上の選択ツールをタップして、選択を終了します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、このプロセスを繰り返して残りの3つの象限を作成します。

この正方形の白い空きスペースに選択したカラーをドロップして、余白だった部分を塗りつぶします。次に、変形ツールをタップして縮小、今回は左下隅から右四隅に向かってドラッグします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

50%のサイズのところで止め、変形ツールをもう一度タップして終了。次に、レイヤーパネルでレイヤーの内容を選択し、これを[選択内容2]として保存します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

残りの2つの象限も同じプロセスを繰り返しましょう。
注意!:もし、レイヤーを少し動かしたり、50%より少しズレたサイズに縮小してしまった場合は、修正を試みるのではなく、必ず前の動作に戻ってやり直すことをオススメします。なぜなら、わずかなズレでも、後でパターンにした際に継ぎ目が生じてしまう可能性があるからです。

4つの象限の準備ができたら、この作業レイヤーは消しても大丈夫です。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

ここで、プリメイドキャンバス上で本格的なパターン制作に取り掛かる前に、シンプルなパターンを使って簡単にパターン作りの流れをご紹介します。
まず、2つめのレイヤーを追加します。次に、レイヤー1とレイヤー2の両方を選択してグループ化します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、下のレイヤーをカラードロップで塗りつぶします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

2番目のレイヤーに移ります。紫の色を選択し、The Instant Artist Procreate Brushes and StampsのVincent Painterブラシを使用していきます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

このシンプルなパターンでは、+マークを繰り返し描いていきます。
ポイント!: pターン作成の時に覚えておいてほしい重要なポイントは、なるべくキャンバスの端を避けてモチーフを描いていきましょう。近づくことはできますが、端を越えないように気をつけてください。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

これでシンプルパターンのモチーフがほぼ埋められたので、4象限を活用してシームレスなパターンへと変身させていきます。

3. 4象限を反転

これを行うには、レイヤーパネルをクリックします…
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

…グループ全体を選択したまま、選択ツールをタップします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

そして、下のメニュー画面で、[保存と読み込み]をタップし、前のプロセスで保存した[選択内容1]を読み込みます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

変形ツールをタップします。ここでは、移動や拡大縮小ではなく、下のメニュー画面より左右反転、次に上下に反転させます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

変形ツールを再度タップして終了します。これにより選択した左上に位置する第一象限が左右上下に反転し、外側の角が内側の角になりました。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

後も同様に、残りの3つの象限に同じ動作を繰り返します。
すべて左右上下に反転したら、レイヤーグループに戻り、モチーフを移動したり、さらに追加したりして、パターンを完成させることができます。

次に、パターンがどのように繰り返されるかを確認するために、レイヤーグループを複製します…
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

…次に、複製したグループレイヤーを長押し>サイドメニューを表示>[フラット化]を選択します。これがパターンのリピート確認用のテストレイヤーになります。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

このテストレイヤーをさらに3つ複製します…
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

…これで、合計4つのフラット(画像)化されたレイヤーができました。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、4象限を作った時と同じように、変形ツール>四隅に向かって50%に縮小します。これも、当てずっぽうではなくピタリと50%のところで止まるようにしましょう。他の3つのテストレイヤーにもこれを繰り返します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

4象限を作成し、上記の作業をきっちり繰り返せていれば、縫い目のないシームレスなパターンがそこにはあるはずです。正確性がポイントとなるここまでの作業は、変形ツールの設定である[均一]と[マグネット]の機能で
正確に行うことができます。

4. いよいよお楽しみの時間!

お待たせしました、ここからはたくさんのモチーフを盛り込んだ実際のパターンを作成していきます。
そして、無料素材内のプリメイドキャンバスを使用していきましょう。
これは、すでにパターン制作の肝である4象限の選択範囲がすでに設定されており、これから具体的に描いていくモチーフごとに分けたレイヤーが用意されています。
Guide Reference(4象限ガイド)レイヤーを非表示にします。このキャンバスにはすでに選択内容が保存されているため、すぐにパターンの作成に取り掛かることができます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

Fill Colorと書かれたレイヤーに背景色をカラードロップします。ここでは明るいピーチカラーにします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、Cloudsレイヤーに移動し、白色で雲を描いていきます。ブラシは、The Instant Artist Procreate Brushes and StampsのBig FatPencilを使用します。ブラシサイズを30%に設定します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

このブラシはかなり筆圧の感度が良いので、この一つのサイズで、ふわふわの雲が膨らんでいる部分と、雲の端の細くなる部分を描くことができます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

変形ツールを使用して、以下の雲の配置を調整します。
理想のパターンは、キャンバス全体にモチーフが分散されていることです。描いている時には判断が難しい場合があるため、モチーフごとに分かれたレイヤーに描いていきましょう。そうすれば、いつでも移動や微調整ができるので便利です。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、灰色に切り替えて、暗めの雲を描いていきます。(これも別のレイヤーを用意すると良いでしょう)
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

そして、Starburstsレイヤーに移動します。アウトライン用と塗りつぶし用にレイヤーを分けたいので、Starburstsレイヤーを複製します。レイヤーが限られている場合は、1つのレイヤーでも大丈夫です。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

上のStarburstsレイヤーから始めて、The Instant Artist Procreate Brushes and StampsのDeliciouslyInkyブラシを使用しています。色は白に設定します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

ブラシサイズを約2%に設定します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

小さな惑星や月、キラキラを描いていきます。
次に、プワプワした小さな泡をたくさん描いていきます。いろんなモチーフを組み合わせたり、抽象的な形で遊んだりできるので、プリントやパターンの制作は楽しいですね。
今回は、ドリーミーな可愛いほっこり系のパターンに仕上げていくので、モチーフに意味を持たせる必要はありません。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、下のStarburstsレイヤーに移動します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

The Instant Artist Procreate Brushes and StampsのDeliciouslyInkyブラシのまま、この濃いめのオレンジイエローで、上のアウトラインレイヤーで描いたモチーフたちを塗り絵していきます。
遊び心を加えて、液体が閉じ込められているようにしてみましょう。全部塗りつぶすのではなく、半分ほど埋めてから、上面のラインをわずかに湾曲させます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

もし可能であれば、このStarburstsレイヤーの下にさらに空のレイヤーを追加し、液体の上面を描いていきます。ここでも、レイヤーの制約がある場合は、すべて同じレイヤーでも大丈夫です。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

この液体の立体感を出すために、上面には同じ系統のより暗い色を使用しています。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、Leavesレイヤーに移動します。優しい緑を選択し、The Instant Artist Procreate Brushes and StampsのGrungy Pencilに切り替えます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

ブラシサイズを約1%に設定して、小枝を描きながら緑を足していきましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、Splotchesレイヤーに移動し、紫色を選択、The Instant Artist Procreate Brushes and Stampsのパターンブラシに切り替えます。
このセットには、抽象的な要素としパターンに使える楽しいパターンブラシがたくさんあります。パターンのちょっとした隙間を埋めるのに有効的です。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

このPattern: Spot Marksブラシを使用しています。これをキャンバス全体に散らし、一部を雲の上にも重ねてみましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、The Instant Artist Procreate Brushes and StampsのPattern: Leafyブラシに切り替えて、同じ紫のまま、葉っぱを散らしていきましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

ベタ感があるので、もう少し自然に見せるために、消しゴムツールを使用します。The Instant Artist Procreate Brushes and StampsのBig Fat Pencilブラシを消しゴムとして使用します。シャープすぎるなと感じる輪郭をぼかすように消していき、パターンブラシの切れている葉っぱを取り除きます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

キャンバスがモチーフでほぼ埋まってきたので、Cloudsレイヤーに戻ってテクスチャーを追加します。Cloudsレイヤーの上からクリッピングマスクレイヤーを適用させます。
つまり、新しいレイヤーを追加>それをクリッピングマスクし…
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

…描画モードを[乗算]に変更します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、このレイヤーを複製し、描画モードを[オーバーレイ]に設定します。(上部のクリッピングマスクレイヤーがオーバーレイになります。)
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、乗算クリッピングマスクレイヤーで、The Instant Artist Procreate Brushes and StampsのBuild Up Powder Puffブラシを選択します。ここでのサイズは13%に設定します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

紫で、雲の付け根にこのテクスチャーをそっとスタンプします。雲の陰を演出しましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、この黄色に変更し、オーバーレイクリッピングマスクレイヤーに移動して、雲の右下に沿ってこのテクスチャーをスタンプします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、灰色の雲レイヤー上で同じことを行います。2つのクリッピングマスクを作成し、下部を[乗算]に、上部を[オーバーレイ]に設定します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

乗算クリッピングマスクレイヤーでは、この濃い灰色で、同じThe Instant Artist Procreate Brushes and StampsのPowder Puffブラシで雲の陰を付けています。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、オーバーレイクリッピングマスクレイヤーで黄色に切り替え、これを雲の右側に重ねていきます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

Splotchesレイヤーに移動します。クリッピングマスクレイヤーを上に1つ追加し、ブレンドモードを[乗算]に設定します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

紫を選択して、葉っぱにバリエーションを追加します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、緑の小枝レイヤーの上に、2つのクリッピングマスクレイヤーを追加します。描画モードは、前と同じように下が[乗算]、上が[オーバーレイ]に設定しましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

乗算クリッピングマスクレイヤーでは、この濃い緑色を使用し、ブラシサイズを小さくして、陰影を付けていきましょう。主に茎から葉に向かって徐々にフェードアウトさせます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、オーバーレイクリッピングマスクレイヤーで、明るい緑に変更し、同じ工程を踏みます。葉っぱの上部に明るさを足しましょう。

今度は、月とキラキラの2つの黄色の液体レイヤーを結合して、1つのレイヤーとして扱えるようにします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

同じように、この上に2つのクリッピングマスクレイヤーを追加し、描画モードを[乗算]と[オーバーレイ]に設定します。
乗算クリッピングマスクレイヤーでは、濃いオレンジイエローでテクスチャーを追加します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

オーバーレイクリッピングマスクレイヤーでは、明るい黄色で、液体の上面を明るくします。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

ほぼ完成に近づいてきました!パターンにする前に、ここで最後のステップです。月やキラキラを描いた白のアウトラインのStarburstレイヤーに移動し、The Instant Artist Procreate Brushes and StampsのBig Fat Pencilで、すべての泡と形に光沢を追加します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

これで、4象限を上下左右反転してパターンを作成する手順に移ります。
作業したグループレイヤーを閉じ、レイヤーパネルでグループを選択したまま、選択ツール>[保存と読み込み]をタップして、[選択内容1]を選択します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、変形ツールを選択し、左右と上下を反転させます。残りも同じように繰り返しましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

キャンバスが上下逆になった状態になるので、今度はキャンバスを回転させます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

この段階で、モチーフを移動したり、微調整ができます。すべてのレイヤーをモチーフごと分けているので、修正が簡単です。
注意!モチーフを移動するには、レイヤーパネル内のモチーフとそれらのクリッピングマスクの両方を選択して、すべてが一緒に移動するようにします。例えば、泡の一部を移動するには、動作の前に、アウトライン、クリッピングマスク、そして塗りつぶしレイヤー全てを選択する必要があります。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

移動したいモチーフがあるレイヤー全てを選択した状態で、フリーハンド選択ツールを使用して、モチーフの周囲を囲みます…
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

…そして、変形ツールを使用して移動します。この斜めのライン上にできた不自然な空間を埋めることに重点を置いています。この微調整により、パターンの繰り返しがより均一で、自然な見た目になります。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

必要であれば、任意のモチーフを移動してバランスを調整します。移動させる時は、クリッピングマスクを含む全てのレイヤーを選択することを忘れないように。

ここで、パターンのリピートをテストします。レイヤーがこれ以上追加できない場合は、以下のように、キャンバス全体のコピーを作成してから、コピーしたレイヤーグループをフラット化しましょう。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

より多くのレイヤー用が追加できる場合は、レイヤーグループ全体を複製してから、複製したグループを1つのレイヤーにフラット化することができます。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

次に、下のレイヤーグループを非表示にし、フラット化したレイヤーを複製して4つのコピーを作成します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

変形ツールを使用して、キャンバスの4つの象限に合わせてそれぞれ50%に縮小します。
【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto【Procreate】かわいいシームレスパターンの作り方: Wooly Pronto

タラーン!完成です!
お疲れ様でした!あなたの作品は、Design Cutsの Procreate Facebook groupで共有することができます。
ぜひ、あなたの作品に多くの人に見てもらう機会を与えてみてはいかがでしょう!

Design CutsのYouTubeチャンネルでは、他にもいろんなチュートリアル動画やお得なデザイン情報を配信しているので、こちらも合わせてチェックお願い致します!(動画は全て英語のコンテンツになります。)

Design CutsのProcreate素材を見る

 

- このチュートリアルで使用の商品 -

【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoDirty Halftones BrushSet & Video Tutorials【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoThe Big Procreate Print Pack【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoSketch Markers for Procreate【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoFolksy Florals Drawing Templates【Procreate】かわいいシームレスパターンの作り方: Wooly ProntoThe Instant Artist Procreate Brushes and Stamps