自家製のレトロな幾何学的なシームレスパターンbackground_html/css

本来、幾何学的なテクスチャーはモダンな装飾スタイルとして捉えられがちですが、幾何学的な形状を創造的に重ね合わせることで、新しいレトロ風味のテクスチャーパターンを生み出します。

このチュートリアルは私のオリジナル記事です。転載する場合は、その旨を著者に通知し、元の記事の出典を明記してください。元のソースについては ここをクリック してください。

はしがき

幾何学的なテクスチャーは現代的な装飾スタイルとしてみなされるべきですが、幾何学的な形状が創造的に重ね合わされると、新しいテクスチャーパターンが組み合わされます。どこかレトロな雰囲気のあるこの柄は、伝統的なデザインの素材としてよく使われるシームレスな柄を作ることができます。

インスピレーションを探しています

中国の伝統的な模様から学ぶ価値のあることがたくさんあるので、伝統的な模様の写真から創造的なインスピレーションを探しました。ご興味がございましたら、 ここをクリック してさらにダウンロードしてください。

これらのパターンは比較的複雑ですが、作成時に少し簡略化することができます。白い紙にスケッチしたり、手書きのタブレットにアイデアを直接描くこともできます。

テクスチャの組み合わせ

パターンを描き始める前に、完成品の全体計画、つまり逆推論を大まかに立てる必要があります。これは探偵小説の一部のように聞こえますが、実際にはデザインにおいて不可欠です。まず頭の中で理想的な効果を想像し、次にその効果を逆算して考えることができます。

通常、私はデザインプロセス全体を「構成」、「詳細処理」、「最終効果」の 3 つの主要なリンクに単純化します。「構成」の部分には、全体のレイアウトスタイル、詳細の表現の選択が含まれます。加工にはカラーマッチング、フォントデザイン、組版などが含まれ、最終的な効果には最終的な詳細な調整が含まれます。この 3 つのリンクは密接につながっていますが、最終的な効果を最初にイメージしてから、構図やディテールの処理を進めるという順序も使用できます。

たとえば、この場合、最終的なエフェクトテクスチャは非常に単純なアイデアです。テクスチャは大・中・小の3パターンで構成されています。単一のテクスチャ内の構成は次のようになります。

大まかな構図が決まったら、パターンを描き始めます。

小さなパターンの描画

最初に最小のパターンを描画しましょう。 PS を開き、250*250px の新しいドキュメントを作成します。ドキュメントのルーラーを開き、ガイドを使用してドキュメントを中央に配置します。次に、前景色を紫に設定し、背景を紫で塗りつぶします。以下に示すように。

楕円ツールを使って中心点を中心とした円を描きます。この円の塗りつぶしをなし、線を 1 ピクセル、線の色を白のままにします。

この円の中心に小さな円をたくさん描き、その小さな円を花の中心として1つで囲み、シンプルな花の形を作ります。こちらも蓮の花の心をイメージした最もシンプルな花柄です。

さらに長い楕円を 2 つ描き、十字にします。前の図形の上に重なるように配置して、パターンをより豊かにします。

多角形ツールを使用し、辺の数を 3 に設定して真上に配置し、この三角形をコピーして直下に垂直かつ対称に配置します。この 2 つの三角形をコピーした後、30 度回転させます。このコピーと回転の処理により、複数の三角形で囲まれたパターンが得られます。

このとき、ダイレクト選択ツールを使用して三角形のアンカーポイントの 1 つを選択し、各アンカーポイントをピクセルグリッドに位置合わせします。この目的は、グラフィックを詳細に保つことであり、ピクセルグリッドを利用することは良い選択です。グラフィックを拡大するとピクセルグリッドが表示され、ピクセルが確認できるようになります。まだ表示されていない場合は、[表示>表示>ピクセルグリッド]にチェックを入れてオンにしてください。このようにして、すべての三角形のアンカーポイントがピクセルグリッドに揃えられます。

100% サイズに拡大すると次のようになります

小さなパターンを描画した後、上のレイヤーをグループ化できます。グループ、それを非表示にします。

中サイズのパターンの描画

中サイズのパターンは小さなパターンに比べて少し複雑なので、PSに付属のベクターグラフィックを中心に使用しています。グラフィックは空白で満たされたままで、1 ピクセルの白いストロークがあります。

さらに、内蔵のベクターグラフィックスからハートの形を見つけて、ハートの形を四隅に配置します。同時に、2 つの長方形を重ね、そのうちの 1 つを 45 度回転させます。長方形は中空で塗りつぶされており、ストロークは 2 ピクセルの白です。

このとき、グラフィックの中央の位置が少し空いてしまいます。レトロなスタイルなので、パターンはできるだけいっぱいにしておく必要があるため、楕円を追加しました。花の形をシミュレートします。次に、装飾として各長方形の上部に 2 つの重なった小さな円を追加します。外側の小さな円の輪郭は 2px、内側の輪郭は 1px です。

長方形のアンカーポイントがピクセルグリッドと位置合わせされていることを忘れずに確認してください。さらに通常のサイズに拡大縮小し、中サイズのパターンをグループ化して非表示にします。

大きなパターンの描画

もちろん、大きなパターンが最も複雑ですが、実際に上記 2 つのパターンの描画プロセスを実演すると、これらのパターンが実際には非常に単純な形状で構成されていることがわかります。構成されました。単純な幾何学的形状を使用すると、ある種の複雑な美しさを生み出すことができます。

中心を描きましょう。中心位置は 2 つの円で構成され、次に楕円を使用して円の中心に花の形が形成されます。花びらが紡錘形であることがよくわかります。これには、最初に長い楕円を描く必要があります。次に、変換ポイントツールを使用してクリックします。アンカーポイントが両端に揃うと、楕円はシャトルの形状になります。

円の外側を小さな円の組み合わせで囲みます。まず円を描き、次に別の円を対称に配置し、2 つの円を 30 度回転して、この手順を繰り返します。周囲の形状を形成することができます。次に、同じように三角形を描きます。三角形のアンカーポイントはピクセルグリッドに合わせて配置されます。

さらに 2 ピクセルのストロークで大きな円を 2 つ描きます。このとき、小さな円の内側に、大きな円の外側に小さな円を配置します。そしてそれらを中に置きます。

このとき、四隅の飾り丸を邪魔しないように、外側に大きめの円を追加します。、マスクを使用して、装飾と重なっている部分を消去できます。これにより階層感が生まれ、写真がより豊かになります。

ここでの幾何学模様の組み合わせは非常にランダムであり、全体的なトーンが決まっていれば、さまざまなパターンを非常に自由に組み合わせることができます。完成品を実物大で見てみましょう。

シームレステクスチャを定義します

この時点で、小さなパターンを開いて、4つの辺の中点に配置します。その中心は、キャンバスの 4 つの辺の中点に正確にある必要があります。

中サイズのパターンがキャンバスの四隅に配置され、その中心が四隅の頂点と正確に一致します。

大きなパターンがキャンバスの中央に配置されます。この時点で、シームレスなパターンが組み立てられます。

背景レイヤーをオフにし、[編集>パターンの定義]に進み、「レトロテクスチャ」として保存します。

現時点では、レトロなシームレステクスチャが完成しており、それを使用して新しいドキュメントでテクスチャ効果を表示できます。たとえば、任意のレイヤーにパターンを塗りつぶした場合、このパターンを選択すると作品が表示されます。

追記

レトロなテクスチャは伝統文化に関連するデザインに非常に適しています。このとき、表示される他の要素も準拠する必要があることに注意してください。フォントなどもこのスタイルに合わせてください。また、中国語のスタイルを維持するように努めますが、同時にシンプルで美しい必要があります。質感の複雑さや単純さはすべて自分で作り出しており、その過程自体も楽しいものです。