幾何学的パターンを使って、繊細なざらっとしたテクスチャを作成するPhotoshopのチュートリアル

ゼロから作成した幾何学的パターンを使って、オリジナルの繊細なグランジ風のテクスチャを作成するPhotoshopのチュートリアルを紹介します。

テクスチャのキャプチャ

Creating Unique Grunge Patterns for Your Website Backgrounds

[ad#ad-2]

下記は各ポイントを意訳したものです。
※Photoshopのキャプチャは当方が作業したCS5のものです。

幾何学的パターンを使って、繊細なざらっとしたテクスチャの作り方

Stepは全部で、4つです。

Step 1

まず、Photoshopを起動して、新規のドキュメントを作成しましょう。
ドキュメントのサイズは12x12ピクセルにします。

背景色をライトグレー(#e6e6e6)にし、塗りつぶしツール(G)で塗ります。

Photoshopのキャプチャ

12x12ピクセルのドキュメント(拡大)

Step 2

新しいレイヤーを作成(Ctrl+Shift+N)し、ブラック(#000000)で塗ります。

[フィルター]-[ノイズ]-[ノイズを加える]を選択し、ノイズフィルターを適用します。
量を「70.67%」、分布を「均等に分布」、「グレースケールノイズ」にし、前景と背景がホワイトとブラックであることを確認した後、ノイズを適用してください。

Photoshopのキャプチャ

ブラックにノイズを加える

ノイズを適用したレイヤーは、レイヤーモードを「スクリーン」、不透明度を「45%」にセットします。
下記のように、ブラックは消えて、繊細なざらっとしたエフェクトになります。

Photoshopのキャプチャ

ブラックを繊細なエフェクトに

[ad#ad-2]

Step 3

幾何学的なエレメントを加えます。
使用しているミニマルな幾何学的パターンは「Minimal patterns for backgrounds Vol2」からダウンロードできますが、ここではゼロから作ってみます。

新しいレイヤーを作成(Ctrl+Shift+N)し、長方形選択ツール(M)を使い、1px単位でブラックで塗り、幾何学的な模様を作成します。

Photoshopのキャプチャ

幾何学的な模様

Step 4

作成したパターンはすぐにテストすることができます。

[編集]-[パターンを定義]から、作成したパターンを保存します。次に、新規のドキュメントを作成し、[編集]-[塗りつぶし]で「塗りつぶし」パネルを開き、使用を「パターン」にし、作成したパターンを選択します。合成は、描画モードを「通常」、不透明度を「100%」にします。

12x12ピクセルからカラーコントラストがうまく機能するか判断することは非常に難しいので、大きなドキュメントでテストすることは重要です。
時にはそのエレメントがあまりにも微妙すぎると思うかもしれません、しかしそれをテストした後に実は多くのコントラストをもっていることは多々あります。

ここで作成した幾何学的なエレメントはあまりにも強いものです。

Photoshopのキャプチャ

そのままではコントラストが強すぎる

この幾何学的なエレメントを使って、繊細なざらっとしたテクスチャにするには、幾何学的エレメントのレイヤーの不透明度を「5-6%」くらいにします。

Photoshopのキャプチャ

完成したテクスチャ

元記事では、他にもテクスチャ素材を元に作成するチュートリアルもあります。

テクスチャのキャプチャ

元記事で解説されているもう一つのテクスチャ

sponsors

top of page

©2018 coliss