デザインの雰囲気をガラっと変える、カーボンテクスチャの背景素材33選＆作り方

WebサイトやサービスUIの背景デザインは、見る人に与える印象を大きく左右します。色はもちろんですが、テクスチャの細かな違いによって、全体の見え方が変わります。

テクスチャのなかでも独特の雰囲気を出す「カーボンテクスチャ」は、目の粗さや角度の違いが豊富で、あまり主張しない割に印象をポップにもモダンにも変えます。

今回は、カーボンテクスチャをPhotoshopで作成するときの方法と、オススメの素材を30選まとめました！

Photoshopでカーボンテクスチャを作ろう！

カーボンテクスチャとは？

カーボンテクスチャとは、炭の細かい繊維から着想をえた模様です。色は黒から灰色が多く、レーシングカーのボディや自転車のフレーム、釣り竿、ゴルフのシャフトなどを表現する模様として用いられているため、見たことがある人は多いのではないでしょうか。

物理的なカーボン素材は、プラスチックポリマー樹脂に圧力や熱をかけ接着させることにより、非常に強くて軽量の材料を作れます。

作り方のポイント

重要なのは、以下の3つのポイントです。

• 暗い色のグラデーションをベースに使用し、明るい色を強調する
• 派手にしすぎず、あくまで微妙に
• 画像はできるだけ小さくとどめる

STEP1：下地のレイヤーに色をつける

まずは、Photoshopで4×4のドキュメントを開きましょう。次に背景に2×4ピクセルのレイヤーを作り、そのレイヤーにグラデーションをかけます。

色は下から黒 (#000000)で一番上がダークグレイ (#4f4f4f) になるようにしてください。このグラデーションが、カーボンテクスチャの基本スタイルとなります。何か変更がある場合も、ここから始めましょう。

STEP2：半透明のレイヤーを作成する

次に、先ほど作成したレイヤーのうち、Rectangular Marqueeツールを使用して1×4ピクセルだけを切り取り、新しいレイヤーを作成します。

このレイヤーの透明度は92%に設定しておきましょう。この時点で明るさはありませんが、シェーディングによって、深みが出ているように見えます。

STEP3：模様をつける

今度は、2つの1×4ピクセルレイヤーを結合し、新しいレイヤーの最表面の2×2選択を行います。次に、2つの2×2ピクセルレイヤーを反転させます。この繰り返しをし、編集メニューのパターン定義ツールを使用して、パターンライブラリに保存しましょう。

好きな模様のパターンができたら名前をつけて保存します。すでに基礎のスタイルができあがっているので、ここからまた何パターンか作ることができます。

背景をアレンジする方法

背景のアレンジには、8×8ピクセルのドキュメントを使用しましょう。前回は4×4ピクセルというかなり小さなサイズを扱っていたので細部までは作り込むことができませんでしたが、今回は違います。上部と下部で別々の4×4ピクセルの四角を追加します。

まずは下の四角にグラデーションを加えます。左下のスペースは暗く、ほぼ黒ですので、かなり暗めのグラデーションがお勧めです。上の四角には、少し明るめのグラデーションを使います。両方のレイヤーを複製し、正方形をドキュメントの反対側の角に反転します。

次にレイヤーメニューで新しいレイヤーを追加して、レベルを選択します。

これにより、グラデーションの明るさとコントラストを混ぜ合わせることができます。しかし、Photoshopでパターン定義ツールを使用しているときは、レイヤーを選択することはできないということも覚えておきましょう。

オススメのカーボンテクスチャ素材30選

ここからは、参考になりそうな実際のデザインの例を30パターン出していきます。

1. 高解像度ダークカーボンテクスチャ

Deviantart

2. コールドカーボンテクスチャ

Deviantart

3. アートカーボンテクスチャ

Deviantart

4. ナノカーボンテクスチャ

Deviantart

5. ブラックカーボンテクスチャ

Deviantart

6. アブスカーボンテクスチャ

Deviantart

7. PSDカーボンテクスチャ

Deviantart

8. Photoshopカーボンテクスチャ

Deviantart

9. カラフルカーボンテクスチャ

Deviantart

10. プレーンカーボンテクスチャ

Deviantart

11. アルミカーボンテクスチャ

Deviantart

12. デスクトップカーボンテクスチャ

Deviantart

13. 色つきカーボンテクスチャ

DESIGNERFIED.COM

14. チェック格子

ダウンロード

15. 黒＆グレーカーボンテクスチャ

PSDGraphics

16. カーボン背景

Deviantart

17. PSDカーボン背景

Pixeden

18. シームレスカーボンテクスチャ

Deviantart

19. タイルや金属用

elemis

20. ダークメタルメッシュ

freepik

21. 抽象的メタリック

freepik

22. 細かいカーボンテクスチャ

freepik

23. 鋼ファイバーカーボンテクスチャ

ダウンロード

24. タイル風カーボンテクスチャ

Deviantart

25. カーボンテクスチャパック

Vecteezy

26. ダークカーボンテクスチャ

Deviantart

27. ファイバーカーボンテクスチャ

ダウンロード

28. コールドカーボンテクスチャ（壁紙）

Deviantart

29. Photoshopカーボンテクスチャ

toptal

30. 複合カーボンテクスチャ

Wegraphics

31. 立体カーボンテクスチャ

ダウンロード

32. 光沢カーボンテクスチャ

ダウンロード

33. 深みグレーカーボンテクスチャ

ダウンロード

まとめ

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

もちろん今回紹介していないサイズでのカーボンテクスチャの背景は可能ですし、色も自由です。基本スタイルをアレンジすれば、何パターンも作り出すことができます。

ぜひ、オリジナルのカーボンテクスチャ背景を作ってみてください！

（翻訳：Kelala）