【Photoshop】布っぽいテクスチャの作り方

更新日:2025年09月22日 /  投稿日:2025年10月20日

Phptoshopで布っぽいテクスチャを作る方法

Photoshop(フォトショップ)で布や生地のようなテクスチャの作り方をご紹介したいと思います。
素材サイトで布や記事のような素材がなかった場合に、参考にして頂ければと思います!

布っぽいテクスチャの作り方

まずは、Photoshop(フォトショップ)を立ち上げて、以下の手順で作成をしていきます。

1:レイヤーを新規追加

レイヤーを新規で追加します。

レイヤーを新規追加

シェイプツールでアートボードと同じサイズのシェイプを作成します。
色は任意の色に設定します。今回は白(#FFFFFF)で設定しています。

2:フィルター効果をレイヤーにつけます

次に先程作成したレイヤーにフィルター効果を付けていきます。

フィルター効果をレイヤーにつけます。フィルター→ノイズ→ノイズを加えるを選択します。

フィルター→ノイズ→ノイズを加えるを選択します。
※スマートオブジェクトかラスタライズの変更を聞かれるので、どちらかを選択します。
今回はスマートオブジェクトを選択しています。

ノイズの量は今回は30%に設定します。
分布方法は「均等に分布」で大丈夫です。
また、グレースケールノイズにチェックは入っていない場合は、チェックを入れて下さい。

次に、フィルター→ぼかし→ぼかし(移動)を選択します。

フィルター→ぼかし→ぼかし(移動)を選択

角度は0°で、距離を40pxに設定します。※距離は任意で設定してみて下さい。

3:レイヤーを新規追加して、同じ工程を繰り返します。

上記の工程が出来たら、もう一度レイヤーを追加し、先程と同じようにシェイプツールで背景を作り、フィルター効果をつけます。

レイヤーを新規追加して、同じ工程を繰り返します

この時、ぼかし(移動)では、確度を90°にします。

新規追加した2枚目のレイヤーを乗算にします。
以下のようになっていれば完成です。

2枚目のレイヤーを乗算した完成形

まとめ

Photoshop(フォトショップ)で布や生地のようなテクスチャの作り方をご紹介いたしましたが、いかがでしたか?
もし、こうした素材を使いたいけど、素材サイトに無い場合は、参考にしてみて下さい!

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら