服のカスタムパターンの作成と適用

毎回キャラクターの衣装に手書きでパターンを描くのではなく、マテリアルタブから繰り返しパターンを使用すると、多くの時間と労力と手首の痛みを省くことができます。

このチュートリアルは（うまくいけば）あなた自身のパターンを作成する方法、そしてあなたのイラストや漫画でそのパターンを使用する方法をあなたに教えるでしょう。

 

もちろん、Clip Studioにあらかじめインストールされている繰り返しパターンを使用したり、Assetsからパターンをダウンロードしたりすることもできます。描画にパターンを適用する方法を説明するところまで直接進みたい場合は、「パターンの適用」に進んでください。

私はこのチュートリアルをできる限り初心者にやさしいものにしようとしましたが、質問があれば以下にコメントを残してください。

。

。

。

繰り返しパターンの基本

繰り返しパターンは、同じ画像を何度も繰り返すことによって作成されたパターンです。表示するよりも表示する方が速いので、CSPで繰り返しパターンがどのように作成されるのかを説明します。

 

まず、空のキャンバスが必要です。何でも描いてください。

 

描画したレイヤーをマテリアルウィンドウにドラッグします。標準のワークスペースで、右上（ナビゲータの左）にある<<をクリックすると、マテリアルウィンドウが開きます。ここには、ダウンロードしてプレインストールしたすべてのマテリアルがあります。整理するために、独自のパターン用に新しいフォルダを作成することをお勧めします。

 

レイヤーをマテリアルウィンドウにドラッグすると、そのイメージはマテリアルウィンドウに「通常の」イメージマテリアルとして表示されます。

 

材料をダブルクリックして、ポップアップで[タイリング]ボックスをオンにします。

 

キャンバス上のマテリアルウィンドウからマテリアルをドラッグします。その後、パターンのサイズを変更したり回転したりできます。

 

おめでとうございます。最初の繰り返しパターンを作成しました。

 

 

 

 

タイリングをチェックしたときに、小さなドロップダウンメニューが「アクティブ」になっていることにお気づきでしょうか。ここでは、パターンを並べて表示する方法を3つ選択できます。繰り返し、反転、または反転。

（特に指定のない限り、このチュートリアルでは常に「繰り返し」を使用しました。）

 

 

ここで、千鳥格子と輝くパターンを作成した方法のプロセスを説明します。この2つの主な違いは、千鳥格子パターンでは線/形状が最後につながっているのに対し、輝くパターンではそうではないということです。これら二つの例であなたはあなた自身の、独創的なパターンをデザインしそして作成するのに必要な全ての原則を学ぶべきです。

 

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

追加のヒント：ベクターレイヤー

パターンにはベクターレイヤーを使用できます。それはそれがピクセル化されることなく画像のサイズを変更することを可能にします。また、後で線の太さや線のテクスチャを変更することもできます。これは、「通常の」（ラスタ）レイヤでは不可能です。

ただし、ベクターレイヤーをマテリアルウィンドウにドラッグすることはできますが、タイルを貼り付けることはできません。そのため、あらかじめベクトルレイヤーをラスタライズする必要があります。

（私は個人的にはラスタレイヤを扱うことを好み、チュートリアル全体を通してそうしました。）

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

。

。

。

千鳥格子パターンの作成

ステップ1：計画

描く前に考えることは非常に重要です。 CSPでパターンを（再）作成するには、長方形で考える必要があります。

例：千鳥格子パターンでは、最初に目にするのは、その「歯」形状の後にその名前が付けられ、その形状が何度も繰り返されます。それで、あなたは単にその形を描く必要があります、そしてあなたは完成しましたね。

 

...しかし、これを実行すると、次のようなパターンになります。

これもまた興味深いものですが、目的としたものではありません。

 

あなたは千鳥格子パターンの中に繰り返しの長方形を見つける必要があります、別の形はうまくいきません。そしてその長方形はできるだけ小さくあるべきです。できるだけ少なく描く必要があるということは、そもそも繰り返しパターンを作成することのすべての目的の後です。

パターンの上にグリッドを描く（または想像する）と、それを見つけるのに役立ちます。

そこにそれがある！これが最小の繰り返し要素です。つまり、千鳥格子パターンを作成するために描画する必要があるものです。

その横にあるすべての四角形はまったく同じに見えます。同じパターンを実現するために、もっと小さい四角形にすることはできません。

ステップ2：設定

次に新しいファイルを開き、すべてを描画できるようにします。

「最小の繰り返し要素」は最終結果のほんの一部にすぎないため、パターンのキャンバスをそれほど大きくする必要はありません。私は通常A4か30x30cmのキャンバスサイズで仕事をしています、そして繰り返しパターンのために私は4x4cm（あるいは多分8x8cm）より大きくなることはないでしょう。しかし、それは実際にあなたがどのサイズで作業したいか、そしてどのくらいの大きさにしたいかにかかっています。

まず、グリッドを設定することは、繰り返しパターンに役立ちます。理想的には、グリッドでキャンバスを4つの等しい部分に分割する必要があります。これは、標準のグリッド設定を使用した4 x 4 cmキャンバスの場合です。

[グリッドを有効にするには、[表示]をクリックして[グリッド]をクリックします。グリッドのスケールを変更するには、[表示]をクリックし、[グリッド設定]をクリックして、[ギャップ]に別の数字を入力します。]

 

タイルは、幾何学的なものでなくても、つながっている/シームレスなパターンを作成するのに非常に役立ちます。タイルを張るときに線が一致することを簡単に確認できるからです。

 

オプション：定規を設定することもできます。特に対称定規や放射状定規などの定規は、パターンを作成するのに非常に便利です。この例では、左上と右下の四分円のストライプに対して45度の角度で平行定規を作成しました。[特殊定規]を選択し、[ツールプロパティ]の小さなドロップダウンで[平行線]を選択します。定規を正確に45°にするには、[ツールプロパティ]ウィンドウで[角度のステップ]を有効にして、値を45に設定します。

 

私はたいていすべての支配者を彼ら自身の層の上に置いて、そして次に「すべての層の上に見せる」を作動させます。このようにして、ブラシは、定規があるレイヤーだけでなく、どのレイヤーの定規にもスナップします。定規が必要なくなったら、「定規」レイヤーを非表示にします。

 

これでキャンバスの準備が整い、準備が整いました。実際の描画部分に進みます。

ステップ3：描画

>方法1：きれいなスタイル

パターンをできるだけきれいに見えるようにするには、グリッドと定規を使用して完全に直線を作成するようにしてください。できるだけきれいに見えるように、テクスチャや筆圧のないブラシを使用します（マーカーペンのように）。

基本的に、あなたは計画とセットアップの間に作った準備に固執する必要があります。

 

これが私が千鳥格子パターンを描いた方法の詳細なステップです：

[1]「グリッドに合わせる」を有効にしてキャンバスを4つの正方形に分割する線を描く

[2]右上の正方形を黒く塗りつぶす（バケツツール）

[3]「特別な定規にスナップ」を有効にして、左上と右下の正方形に縞を描き、黒を塗りつぶします

[4]ステップ1から余分な行を削除する

 

.... Aaaそしてこれは結果です：

 

>方法2：手描きスタイル

パターンを幾何学的または人工的ではなく手書きのように見せたい場合は、名前が示すとおりに行うことができます。手で描いてください。つまり、「グリッドに合わせる」や「定規にスナップする」を有効にせず、グリッドと定規を一般的なガイドとして使用してください。

ただし、その場合は、行が完全に一致しない可能性が高いため、後で調整や調整を行わなければならなくなることがよくあります。これは、定規を設定して完全に直線を描くよりも速いように思えるかもしれませんが、実際にはミスのリスクが高いために時間がかかることがあります。

これが私の手描き版のようなものです。私はちょうど向きを決めるためにグリッドを使いました。そして、パターンをテクスチャーのある外観にするために鉛筆のブラシで手ですべてを描きました。

クリーンバージョンではなにもしていなかったところに黒い線を追加したことに注意してください。私はこの影響を避けるためにそれをしました：

余分な線を追加しないと、手でスケッチした線とは対照的に非常に鋭いエッジができます。これらの鋭いエッジは、元の図面で黒い領域がキャンバスのエッジと一致する場所に表示されます。

この問題を回避するために、私は反対側の端に黒い線を追加しました。

私が得た結果はこれでした：

ご覧のとおり、まだ微調整が必要な問題がいくつかあります。次に、元のパターンに戻って調整し、結果に満足するまでそれを繰り返します。

 

大事なことを言い忘れましたが、あなたが「きれいな」方法で描いても、遠くから見ても、それほど目に見える違いはないでしょう。 。

。

。

。

。

。

。

スパークリングパターンを作成する

ステップ0：説明

冒頭で述べたように、千鳥格子と輝くパターンの主な違いは、後者が最後には「接続」しないという事実です。接続パターンの場合は、端に向かって描画するので、各タイルはシームレスに隣のタイルに溶け込みます。輝くパターン、または類似のパターンの場合、通常、要素は互いに接触するとは想定されていません。

タイル間のシームレスな移行を作成することを心配する必要はないので、これは良いことです。しかし、覚えておくべきことが他にもあります。

レイヤーを「マテリアル」ウィンドウにドラッグすると、画像はキャンバス全体の大きさにはなりません。不必要な透明ピクセルは四方すべてで途切れます。

パターンを作成するときにこれを念頭に置かないと、結果は予想とは大きく異なる場合があります。

この問題を解決するには2つの方法があります。

 

[1]白背景

簡単な解決策は、あなたの絵の後ろに白く塗りつぶされたレイヤーを作成し、それをあなたの絵にマージすることです。

このように背景は透明ではなく、途切れることもありません。

しかし、イラストにパターンを追加するときには、白い背景を使いたくないかもしれません。この問題を回避するには、パターンを描画上にドラッグした後で、パターンのブレンドモードを「乗算」に設定します。そうすることで、白は見えなくなります。または、パターンをラスタライズしてから、[編集]> [明るさを不透明度に変換]をクリックします。 （どちらの解決方法もあなたのパターンの色に影響を与えるので、あなたのパターンが完全に黒でない限り私はお勧めしません。）

 

[2]エッジ

キャンバスの端には常に何かがあることに注意を払うことができます。前から星を描いた場合は、星を4つの部分に分けてそれぞれの角に1つずつ配置する必要があります。

（選択ツールを使用してグリッドにスナップし、図面を4つの部分に分割してから、それらを各コーナーに移動し、キャンバスの端に隙間がないようにしました。）

ステップ1：計画

まず、最終結果をどのように見せるかについて考える必要があります。パターンをスケッチし、要素をどのように配置するかを検討することをお勧めします。

 

それから、千鳥格子パターンと同じように、最小の繰り返し矩形を見つけます。

ステップ2：設定

新しいキャンバス！グリッド！完了しました。 （支配者は必要ではないはずです。）

ステップ3：描画

それでは、描画部分に直行します。

幾何学的なものは何も描いていないので、なぜグリッドをアクティブにしたのか不思議に思うかもしれません。しかし、グリッドはそれぞれの小さな要素を配置するための重要なヘルパーです。

2つの大きな輝きを均等に配置したいので、右上と左下の象限の中央に配置します。そうすれば、それらの間の距離は常に同じになります。

それから私はパターンにすべての小さい細部を追加します。タイル張り時のパターンの外観を覚えておくことが重要です。2つの要素が隣接したり、触れたりしないようにする必要があります。

上の画像からわかるように、丸で囲まれた2つの輝きは、互いに隣接しています。

 

 

それ以外は、小さな要素を多少ランダムに配置しただけです。四辺の端にオブジェクトがあることも確認しました。そうすることで、キャンバスを素材に変えるときに、キャンバスの一部が途切れることはありません。

 

そして、これが結果です。

オブジェクト同士が近すぎたり、離れすぎたりしている場合は、前に戻って配置を調整する必要があります。あるいは、特定のオブジェクトのサイズを変更したい場合があります。あなたが結果が好きになるまでそれを繰り返します。

 

 

...そしてこれで、このチュートリアルの「パターンの作成」の部分はもう終わりです。私があなたにもっと話したいと思っていたであろう多くの機能があります、しかしこのチュートリアルはすでに私が予想していたよりも長いです...

あなたは今あなた自身のパターンを作成するのに必要な全ての基本的な道具と知識を持つべきです。頭からキャンバスにアイディアを出すことは、いくらかの試行錯誤を含むことができます - しかし、私が最初にパターンを作ってみたときに私がした間違いがこのチュートリアルであなたを救うことを願っています。

 

また、変換ツールとそのすべてに到達する前の、あなたの視聴の喜びのためのいくつかのより多くの例のパターン：

。

。

。

パターンの変換と適用

パターンを適用する最も簡単な方法は、単純にキャンバスにフラットに配置することです。そのためには、パターンをキャンバスにドラッグして、不要な部分を取り除く必要があります。それにはいくつかの方法があります。

[1]クリッピング - パターンを適用する領域のベースカラーを入力し、そのベースカラーにパターンをクリップします。

 

 

[2]レイヤーマスク - レイヤーマスクを作成し、不要な部分を消去します。

 

[3] Erase - パターンをラスタライズし、消しゴムツールを使って余分な部分を取り除きます。

 

これは非常に簡単なことですが、興味深い部分は次のとおりです。

たとえば、平らな模様を追加するだけで、正面を向いているレンガの壁に効果があります。

 

しかし、レンガの壁を斜めから見るとすぐに、その方法ではうまくいきません。

そして服は平らな壁よりもさらに複雑な形で構成されています。

3次元オブジェクトにパターンを適用するには、それらを変形する必要があります。

 

 

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

追加のヒント：選択ランチャー

Mesh TransformとFree TransformはEdit> Transformからアクセスできます。

しかし、それらをSelection Launcherに追加して、すばやく簡単にアクセスできるようにすることもできます。 （選択ランチャーは、選択したときに表示される灰色のバーです。）

 

セレクションランチャーに新しいボタンを追加するには、右側の[セレクションランチャー設定]をクリックします。

 

変換ツールは、[編集]> [変換]にあります。それから、Selection Launcherの任意の位置にドラッグするだけです。

 

選択範囲を作成するたびにボタンが表示されます。

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

。

。

フラットシェイプ（自由変形あり）

平面の場合は、自由変形を使用してください。

Free Transformを使用する前に、パターンをラスタライズする必要があります。レイヤーを右クリックして「ラスタライズ」をクリックします。

次に、長方形選択ツールを使って選択します。パターンは遠くなるにつれて密になるため、選択範囲はパターンを追加する領域よりも大きくする必要があることに注意してください。

言い換えれば、正面から見た場合、選択範囲はレンガの壁と同じくらい大きくする必要があります。

 

その後、パターンが壁の遠近感と一致するまで、自由変形選択の角を動き回る必要があります。

 

余分なパターンがある場合は、フラットパターンを追加するのと同じように、それを取り除くことができます。それをフラットベースにクリッピングするか、レイヤーマスクを作成するか、単に線を超える部分をすべて消去します。

。

。

。

丸型（メッシュ変換あり）

球や円柱などの円形にパターンを適用するには、メッシュ変換を使用する必要があります。

デフォルトでは、メッシュ変換を使用すると、16個の制御点を移動できます。

しかし、ツールプロパティウィンドウの格子点の数は、水平方向と垂直方向の両方で、2から10の間の任意の数に変更できます。メッシュの任意の点を移動する前にしか変更できません。それについては事前に。

それにより、Mesh Transformを使ってより多くの（あるいはより少ない）複雑な形状を作成することができます。格子点が多いほど、正確になります。

キャンバスのサイズ、選択したサイズ、格子点の数、コンピュータの性能などによっては、メッシュ変換の処理にかなり時間がかかることがあります。

 

球は最初の例として使用します。球は非常に単純で、最も重要なのは球がどの観点から見ても同じに見えるからです。そのため、遠近感を考慮する必要はありません。

必要に応じて、球にガイドラインを描くことができます。 3D形状の理解を深めるために、Mesh Transformを適用するときに制御点をその場で移動する場所を特定する必要はありません。この場合、標準の4 x 4の代わりに6 x 6の格子点メッシュを使用しました。

 

球のために私は円形の選択をしました。メッシュ変換ツールは常に長方形であるため、長方形を選択することもできます。しかし、正しい形状とサイズを選択することで、最後に余計な量を最小限に抑え、間違いを防ぐことができます。 （私は後でこれに戻ります。）

 

残っている唯一のステップはメッシュを調整することです：

オーブ。

 

例えば円柱のような他の丸みを帯びた形状にパターンを適用することは、同じ原理に従います。しかし、円柱はあなたの視点によって異なって見えるので、あなたもそれを頭に入れておく必要があるでしょう。

 

格子点について：先に述べたように、後で数を変更することはできないので、必要な格子点の数を事前に決める必要があります。

一般的に、形状が複雑になるほど、格子点は多くなります。

しかし、より多くの点が常に改善されるわけではありません。たとえば、円柱の場合：円柱は水平軸上でのみカーブし、垂直軸上ではカーブしません。つまり、垂直格子点の数を2つに変更できるということです。調整が簡単になるだけでなく、制御点を配置する必要がなくなるため、精度も向上します。手で直線にします。

下の画像でわかるように、左側の円柱の中央部分にある8つの制御点は完全に古くなっています。あなたはそれらなしで同じ結果を得るでしょう。

。

。

。

衣服への適用

パターンを衣服に適用するのは、基本的な形状に適用するのと同じくらい簡単です。

通常、それはそれほど簡単ではありません。

ほとんどの服は一枚の布でできているわけではありません。それらはいくつかのセグメントで構成されており、最良の結果を得るためには、パターンを各セグメントに別々に適用し、その後メッシュ変換を使用する必要があります。

各セグメントのパターンの角度を変更するだけで「フラット」に適用した場合でも、セグメントを分割することですでに違いが生じます。

たまたまフランネルのシャツが横たわっているとしたら、たかだか縫い目がどのように連続して続くのではなく斜めに交わるのかを見ることができます。

 

簡単な例として、袖にパターンを適用する方法を紹介します。

 

この図では、メインスリーブと巻き上げ部分の2つのセグメントしかありません。それで、それを単純な形に分解してください、2つの円柱があります、そのうちの1つは曲がっています。

 

アームが曲がっているのでメインスリーブを2つのシリンダーに分割するのがより理にかなっているように思われるかもしれません。

しかし、そうするならば、後でそのパターンをつなぐことは不可能ではないとしても、それは非常に難しいでしょう。これは一枚の生地なので、1つのパターンセグメントにする必要があります。垂直格子点の数を増やすこともできます（私は7つの垂直格子点とデフォルトの4つの水平格子点を使用しました）。これにより、複雑な形状の再現が容易になります。

袖のロールアップ部分はこの規則の例外です - 袖は裏返しにされているので、それらは技術的に同じ生地の部分ですが、メイン袖にパターンを接続する必要はありません。だからあなたはその部分を独自のセグメントにすることができます。

 

袖の主要部分から始めて、私は長方形の選択をし、メッシュ変換を使用してパターンを適用しました。私は、「曲がった円柱」の形状のために私が描いたガイドラインを、細かい調整をいくつか加えて、ほとんどこだわりました。

それから私はレイヤーマスクを作成することによって余分なパターンを取り除きました。

 

巻き上げた袖のために、最初に布がそれ自身の上に折り畳まれているので、あなたはパターンがひっくり返されるであろうことを覚えておく必要があります。

そのため、パターンをラスタライズした後、水平方向に反転しました[編集>変形>左右反転]。それからもう一度：長方形選択とメッシュ変換。

 

 

選択するときは、セグメントの形状を念頭に置いてください。そうしたくない場合は、テクスチャが濃くなってしまう可能性があります。 （思い出してください、球に戻って、get-goから正しい形状を選択することが間違いを避けるのに役立つと言ったとき、これは私が意味したことです。）

例：ここに私は非常にシンプルなドレスを着たこのキャラクターがいます。 （私は実際に彼女に輝きのパターンを使用したかったが、格子縞は私が何を意味するのかを示すのにより良い仕事をしている。）あなたが単純に長方形の選択を作成し、そして一番上の方が濃くなります（これはあまり意味がありません）。

 

パターンは縫い目がある角度で交わる必要があることに注意してください。

 

パターンを「正しい」方法で適用するには、2つの選択肢があります。

[1]布が完全に平らに見えることを想像してみてください。あなたがドレスをアイロンをかけていたかのように、基本的に。それはあなたが選択しなければならない正確なサイズです。 [これを実現するには、ポリライン選択ツールを使用する必要があります。]このようにして、元の選択範囲の端が図面内のドレスの端と一致するまでメッシュ変換を調整する必要があります。

それは基本的に球の円形選択を作成することによって私がしたことですが、服の形はもちろんもっと複雑です。

[2]長方形を選択しますが、ドレスの上に余分な部分を追加する必要があることに注意してください。

どちらの場合も、コントロールポイントの位置はまったく同じでなければなりません - オプション1では、それらをどのように配置するかについての追加のガイドが表示されます。

 

ちなみに、このチュートリアルではパターンについてのみ説明しましたが、単一の画像にMeshとFree Transformを使用することもできます。たとえば、シャツに印刷したり、壁にポスターを印刷したりします。

。

。

。

最後の言葉？

これでチュートリアルは終わりです。 （最後に...私は実際にもっと多くの例を使いたい、そしてブラシを作成することについてのセクションを追加したいと思いました、しかしこれはすでに予想よりずっと長い時間で判明しました。）

私はまだ他にはどこにも当てはまらないと言いたいことがいくつかあります。

 

>努力と結果

Mesh Transformを使用してそれを3Dのように見せることはもちろんのこと、衣料品のさまざまな部分を分離することは、必ずしも努力に値するとは限りません。たとえば、遠くに立っているキャラクターのイラストがあるとします。そして、読者がほんの一瞬で各パネルをちらっと見る漫画/漫画では、あなたはあなたが投資したい時間を特に考慮する必要があります。メッシュ変換を使用してパターンを適用するには、特に大きなサイズで処理するのにかかる時間を考えると、かなり時間がかかります。

 

>メッシュ変換の制限

例からわかるように、Mesh Transformで得られる結果は完璧ではありません。特に服のしわなどになると。もちろん、格子点の数を最大に増やすことはできますが、それでもメッシュ変換を使用しただけでは100％正確な3D形状を作成することはできないでしょう。そしてその時点での努力の価値はおそらくないでしょう（上の段落を参照）。

 

 

 

 

これでもう終わりですね！このチュートリアルが何らかの形で役に立つことを願っています。そして、私が最初に述べたように、あなたが何か質問があればコメントを残してください。

 

このチュートリアルでは主に技術的側面に焦点を当てているので、このチュートリアルでは私のアートを正確には紹介しませんでしたが、ご希望の場合は私のソーシャルメディアをご覧ください。私は主にinstagramに投稿し、そして私はartstationのポートフォリオもしています。