Photoshopで布テクスチャの作り方を解説します。

やさしい風合いの繊維で織ったような布のテクスチャですね。webサイトの背景なんかに使えるかと思います。作り方は簡単でPhotoshopの[ファイバー]を使って布の質感を表現しています。

また、サイズを指定した画像の切り抜き方も解説していますので、そちらも併せてご覧下さい。


Step01 [新規]設定

布のテクスチャ作成開始

Photoshopで[新規]ダイアログボックスを開きます。

布のテクスチャを作るカンバスサイズを設定します。大きさは自由ですが、幅と高さが同じ正方形に設定します。


Step02 布のベースとなる描画色と背景色を設定する

Photoshopで布のベースとなる描画色と背景色を設定

布のベースとなる描画色と背景色を設定します。

今回は描画色を白(#ffffff)、背景色を薄いグレー(#efeded)に設定しました。描画色が布の繊維の色、背景色が布地の色となります。


Step03 ファイバーを適用

布の繊維をファイバーで表現

布の繊維をファイバーで表現します。

[フィルター→描画→ファイバー]をクリックします。[ファイバー]ダイアログボックスが開きますので、上図のように設定し、OKをクリックします。


Step04 布のような繊維ができた

布のような繊維ができた

ファイバーが適用され、縦に伸びる布のような繊維ができました。

続けて、[レイヤー→レイヤーを複製]で同じレイヤーを複製しておきます。

参考記事:Photoshopのレイヤーの基本を説明


Step05 複製したレイヤーを回転する

複製したレイヤーを回転

続けて、複製したレイヤーを回転させます。

[編集→変形→回転]をクリックします。


Step06 オプションバーで設定

オプションバーで設定

すると上部に回転に関するオプションバーが表示されますので、上図のように設定します。


Step07 複製したレイヤーが回転した

複製したレイヤーが回転

複製したレイヤー(背景のコピー)が90度回転し、布の繊維のテクスチャの向きが横に変わりました。

続けて、複製したレイヤー(背景のコピー)を[レイヤーパネル]で選択し、描画モードを[乗算]に変えます。


Step08 布風のテクスチャができた!

Photoshopで布のテクスチャができた

上のテクスチャのレイヤーと下のテクスチャのレイヤーが乗算によってうまく馴染み、布のテクスチャができました!

なお、布のテクスチャの作り方はこれで以上です。サイズがこのままで良い方はこれで完成です。

以下のStepは指定したサイズでの切り抜きの方法に関して解説しています。


Step09 布のテクスチャを指定したサイズで切り抜く

布のテクスチャを指定したサイズで切り抜く

現在、布のテクスチャのサイズは800×800の正方形となっています。これを800×600の長方形に切り抜きたいと思います。

[長方形ツール]を選択し、オプションバーでスタイルを[固定]、幅、長さを指定します。

参考記事:Photoshopのトリミングを詳しく解説写真を切り抜く方法 1(Photoshop CS5)


Step10 切り抜きたい場所に合わせる

切り抜きたい場所に合わせる

そのままクリックすると指定したサイズで選択範囲が表示されるので、布のテクスチャの切り抜きたい場所に選択範囲を合わせます。


Step11 ガイドを表示

ガイドを表示

[表示→定規]で定規を表示させ、定規をドラッグするとガイド(水色の線)が出るので、ガイドを選択範囲に合わせます。


Step12 切り抜きツールで切り抜く

切り抜きツールで切り抜く

続いて[切り抜きツール]を選択し、ガイドに合わせて切り抜きます。(切り抜き範囲がガイドに吸着するようになります。)


Step13 切り抜き完了!

布のテクスチャ切り抜き完了

サイズを指定して切り抜くことができました。

これで布のテクスチャのサイズは800×600ピクセルの長方形になりました。


出来上がり!

Photoshopで布テクスチャを作る方法

いかがでしたでしょうか?

Photoshopの[ファイバー]を利用した方法は木目テクスチャの作り方(Photoshop)でも紹介しています。布のテクスチャはこれの応用ですね。

ナチュラルな風合いの布のテクスチャです。描画色と背景色を変えることで他の色の布テクスチャも作ることができます。布は様々なデザインに合いますね。簡単にできますのでぜひお試しください!