yup

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)


新しい働き方にチャレンジしたいあなたへ。

「フリーランスとして働いているけど、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速する今こそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ