こんにちは、WEBデザイナーのソコです!
今回はPhotoshopで「メタリックでリアルなテクスチャを作る方法」をご紹介します。
メタリックなテクスチャは素材サイトには結構ありますが、色を変えたり細かな質感を調整するのが意外と手間がかかる。
そんなときにおすすめの作り方をお伝えします!
特別な素材は不要。標準機能だけで表現できるので、どのPC環境でも手軽に再現できることと質感の微調整ができるのがポイントです。
それでは早速、解説していきましょう。
注:当記事のレベル感は主に3カ月程度のWEBデザインスクール卒業した方に向けたHOW TOをお伝えしています。完全な初学者については、今後、初心者向けノウハウ記事や個別レクチャーを開設予定です!
目次
メタリックでリアル質感のテクスチャの作成手順

今回作るのはこんな感じの、メタリックなスジが入ったテクスチャです。
ポイントを押さえればすぐに作れるようになるので行ってみましょう!
まずは下準備
まずはphotoshopを開きます。
そして長方形ブロックでも塗りつぶしでも良いので、色を塗ります。
次に、ブラシの色を下記に設定します。
・塗り:#777777
・線: #000000

「ノイズ」と「移動」フィルターで下地作り
次に、フィルターから「ノイズ」→「ノイズを加える」を選択
・ガウス分布にする
・量は20%

ノイズが加わり、ざらつきます。
フィルタ「移動(ぼかし)」を適用
次に、フィルタ「ぼかし(移動)」を選択します。
・角度は0度
・距離は「2000」の右MAXに設定

これでスジができました!
グラデーションのベースと合成して質感を作る
一旦スジのレイヤーは非表示にしまう。
そして次に長方形ツールでカンバスいっぱいの長方形を作り、スジのレイヤーの下に置きます。
そのレイヤーにレイヤースタイルでグラデーションオーバーレイを設定します。


角度は-90度、グラデーションが並行にしましょう。
グラデーションの色の作り方はお好みでOKですが、一応参考を載せておきますね!
ベースとスジを「乗算」で合成する
グラデーションレイヤーを作成したら。
非表示にしていたスジのレイヤーを表示して、レイヤースタイルに「乗算」を設定します。

スジ目のあるテクスチャができました!
この合成の便利ポイント
これでテクスチャ自体はできました。
出来上がりとしては、どこにでもありそうなメタルテクスチャなんですが、
この方法で行うと質感の調整が簡単に行えるのが良いところなんです!
フィルタ「移動(ぼかし)」を変えると質感が変わる
スジのレイヤーにかかっている「ボカシ(移動)」を2000から10に変えると

このようにざらついた表現もワンタッチで変えられますし
グラデーションを変えて雰囲気が変わる
グラデーションを変えることで色味の調整も楽々です。

文字にマスクをかけるのも、レイヤー構成もシンプルなので手軽に扱えます。

まとめ
今回はPhotoshopで「メタリックでリアルなテクスチャを作る方法」をご紹介しました!
これを覚えておくと、簡単にメタリックな質感を色々表現できますし、何より素材を使わず「時短」で作れるので作業スピードが捗るのが良いところだと思います!
ぜひマスターしてみてくださいね!
それでは。