Webデザインに使える金属パターン素材 厳選30セット＆PhotoshopやIllustratorで金属パターンを自作する方法

デザイン関連のプロジェクトに、金属パターンの素材を使うのはいかがでしょうか。

高画質の金属パターンは、プロフェッショナル系、インダストリアル系、未来型のハイテクデザインまで、どんなトーンにも使用できます。非常に多くの素材・デザインがあるので、圧倒されてしまう人もいるでしょう。

今回の記事では、Webデザインに使用できる金属パターン素材セットを、無料・有料含めて紹介していきます。タフなインダストリアル系から光沢のあるものまで、どれも高品質なものばかり。ぜひ目を通してみてください。

無料の金属パターン素材セット

1. SDRの金箔パターン（無料）

こちらはSDRが提供する、きらきらと煌めく金箔パターンが4つ含まれているセット。1200×1200 pxで高画質のJPGをダウンロードできます。Webサイト上で、派手なデザインにも、高級感ある仕上がりにも、どちらにも使えます。

2. Web Treats ETCの金属パターン（無料）

Web Treats ETCが提供する、タイル化可能な無料の金属パターンセットです。磨きをかけた金属、カーボンファイバー、引っかき傷のついた金属、波型の金属など、さまざまなパターンがあります。512×512 pxと1024×1024 pxの2サイズでダウンロードできる16つのパターンが、Photoshopパターン（.PAT）ファイルとしてダウンロードできます。もちろん、PSD、JPGフォーマットでの保存も可能です。

3. Premium Pixelsの錆びた金属パターン（無料）

こちらはPremium Pixelsが無料提供している、2500px x 1600pxの高画質でダウンロード可能な錆びたテクスチャーの金属パターンです。

4. GraphicFlipのシルバーグレイ金属パターン（無料）

こちらはGraphicFlipから提供されている、商用利用可能な無料金属パターンセットです。磨きのかかったシルバーグレイ色パターンが4種類用意されており、それぞれ3000×2000 px、300 DPIのJPGファイルでダウンロードできます。Webサイトだけでなく、プリントデザインにも最適です。

5. Magnific（旧freepik）の赤く薄汚れた金属パターン（無料）

こちらはMagnific（旧freepik）が提供する無料の金属パターンです。シンプルですが、薄汚れた雰囲気のあるクールな金属パターンです。4000×4000 pxのJPG画像としてダウンロードできます。

6. Graphics Fuelの金属パターン（無料）

Graphics Fuelが提供するこの金属パターン素材セットは、タイル化できる5つのパターンが含まれています。レイヤー化されたPSDファイル、あるいは600×400 pxのJPGでダウンロード可能です。

7. Magnific（旧freepik）のグリルメタルパターン（無料）

Magnific（旧freepik）では、暗い色合いのグリルメタルのパターンを含むベクター素材を検索できます。「Free」と表示された素材は無料でダウンロードが可能です。

8. BittBoxの錆びた金属サインのパターン（無料）

BittBoxが提供する5つの金属パターンには、錆びついた金属のデザインがなされています。

9. Poly Havenの縞鋼板パターン（無料）

Poly Havenは、3D制作向けのテクスチャや3DモデルをCC0ライセンスで無料配布しているサイトです。「Metal Plate」は滑り止めの凹凸模様が入った縞鋼板のテクスチャで、最大8K（8192×8192 px）の解像度でダウンロードできます。

10. Poly Havenの緑色に塗装された金属パターン（無料）

Poly Havenの「Green Metal Rust」は、緑色に塗装された金属板に細かな傷や錆が入ったテクスチャです。最大8K（8192×8192 px）の解像度でダウンロードでき、商用・私用どちらにも使えます。

11. Poly Havenの錆びた金属パターン（無料）

Poly Havenの「Rusty Metal 02」は、銀色の金属板にオレンジ色の錆が広がったテクスチャです。カラーマップのほかにノーマルマップなども用意されており、最大8K（8192×8192 px）の解像度でダウンロードできます。

12. ambientCGの錆びた鉄のパターン（無料）

ambientCGは、PBRマテリアル用のテクスチャをCC0ライセンスで無料配布しているサイトです。「Metal 053 C」は錆が広がった古い鉄板のテクスチャで、1K〜8KのサイズをJPGまたはPNG形式で選んでダウンロードできます。

13. ambientCGの波型金属パターン（無料）

ambientCGの「Corrugated Steel 009」は、細かい凹凸が横方向に並んだ波型鋼板のテクスチャです。1K〜8KのサイズをJPGまたはPNG形式で選んでダウンロードできます。

14. ambientCGの装飾金属プレートのパターン（無料）

ambientCGの「Metal Plates 006」は、ダークグレーの金属プレートに小さな丸い点が斜めの格子状に並んだテクスチャです。1K〜8KのサイズをJPGまたはPNG形式で選んでダウンロードできます。

15. Texturelabsのひび割れ塗装のアルミパターン（無料）

Texturelabsは、デザイン用のテクスチャ素材を無料で配布しているサイトです。「Cracking paint aluminum」は塗装にひびが入ったアルミ板のテクスチャで、最大7952×5304 pxのJPGでダウンロードでき、商用利用もできます。

16. Texturelabsのリベット留めの金属パネルパターン（無料）

Texturelabsの「Riveted aircraft skin」は、航空機の外板のようにリベットが並んだ金属パネルのテクスチャです。最大7952×5304 pxのJPGでダウンロードでき、商用利用もできます。

17. Texturelabsの金色の塗装パターン（無料）

Texturelabsの「Fine gold sparkle paint」は、細かいラメが入った金色の塗装面のテクスチャです。最大7238×4771 pxのJPGでダウンロードでき、商用利用もできます。

18. Texturelabsの古びた塗装金属の壁パターン（無料）

Texturelabsの「Torn paper and metal」は、グレーに塗装された金属の壁に破れた紙片が残ったテクスチャです。最大7952×5304 pxのJPGでダウンロードでき、商用利用もできます。

19. Texturelabsの傷の入った軍用金属パネルのパターン（無料）

Texturelabsの「Military scratched panel」は、暗い色に塗装された軍用の金属パネルに細かい傷が入ったテクスチャです。最大7799×5202 pxのJPGでダウンロードでき、商用利用もできます。

有料の金属パターン素材セット

20. DESIGN PANOPLY「Metal Textures Pack 1」の金属パターン（$5~50）

DESIGN PANOPLYの「Metal Textures Pack 1」のセットには、9つの高画質な金属パターンが含まれています。印刷物、Webデザインどちらにも最適で、Creative Marketからダウンロード可能です。

21. DESIGN PANOPLY「Dark Metal Pattern Pack 1」のダークな金属パターンセット（$5〜50）

DESIGN PANOPLYの「Dark Metal Pattern Pack 1」は、10つのパターンと3つの金属テクスチャが含まれています。PSDファイルとPhotoshopパターン(PAT)ファイルでダウンロード可能です。

22. DESIGN PANOPLY「Rust Textures Volume 1」の錆びた金属パターン（$12~120）

DESIGN PANOPLYの「Rust Textures Volume 1」では、錆びれた雰囲気の34の高画質パターンセットが販売されています。

23. Graphcoderの高画質な金属パターン（$4~60）

Graphcoderは、8つの高画質なパターンが揃ったセットです。3000×2000 px のJPG画像としてダウンロードできます。

24. Photobusの金属パターン16選（$9~90）

Photobusのセットには、スチール、シルバー、アイロン、錆びたアイロン、古いメタル、グリッドメタル、スキューアイロンメタルなど、さまざまな種類の金属パターンが揃っています。Creative Marketにて全てのパターンを5760×3840 pxの高画質で購入できます。

25. Background Storeの磨きをかけた金属パターン（$3~29）

Background Storeの提供するこちらのセットは、PSDのテンプレートとしてダウンロードできます。プレゼンテーション、デジタルアート、写真、印刷物、Webデザインなど、どんな用途にも最適です。300dpiで3000×2500pxのJPGファイルが含まれています。

26. muzikizumのタイル化可能な金属パターン（$7~105）

muzikizumの提供するこちらのセット。タイル化できる金属パターンを、GraphicRiverからPSD、JPG、Photoshopパターン（.PAT）フォーマットとしてダウンロードできます。

27. graphicridersの引っ掻き傷のある金属パターン（$3〜45）

graphicridersの金属パターンは、2セット5色で構成されています。graphicridersがデザインを担当しており、2500×1875 pxのJPGファイルでダウンロードできます。

28. Nik Sorlの引っ掻き傷のある薄汚れた金属パターン（$10~100）

Nik Sorlのタフで薄汚れた雰囲気のデザイン。Creative MarketからJPGフォーマットでダウンロード 可能です。

29. iSource Texturesの波型金属パターン（$5~75）

iSource Textures提供のこちらのセットには、20の高画質なパターンが含まれており、4272×2848 pxのJPG画像としてダウンロード可能です。

30. Starnetblogの金属パターン（$4~60）

Starnetblogによって提供されているこちらのセットは、PSDファイルとしてGraphicRiverからダウンロード可能です。全てのレイヤーは2592×3888 pxのJPG画像です。

金属パターンを自分で作ってみる

ここまでダウンロード可能な金属パターンをいくつか紹介してきましたが、もし理想のものが見つからない場合は、自分で作ってしまうのもアリでしょう。以下、ゴールドメタルのパターンを作成するステップを紹介します。ゴールドメタルのようにみえるテクスチャのデザインを作成するには、次のような方法があります。

• カメラを使い、ゴールドの表面が映った写真を撮影、スキャンする
• スキャナーで金箔をスキャンする
• 画像ストックで検索する
• Photoshopで編集する

きちんと準備し適切なステップを踏めば、これらのどの方法でも素晴らしいゴールドメタルのパターンを作成できるでしょう。

今回は、Adobe PhotoshopおよびIllustratorを使って独自の金属パターンをイチから作る方法をご紹介します。

Photoshopでゴールドメタルの金属パターンを作る3つのステップ

まずはじめに、Photoshopのフィルター機能を活用したゴールドメタルの金属パターン作成方法をご紹介します。フィルター機能を使うことで、金属パターンに限らずどんなテクスチャーのパターンも非常に簡単に作成できます。

斬新でユニークなパターンにするには、ちょっとした調整をするだけです。Photoshopを開き、バックグラウンドレイヤーをダブルクリックしてロックを解除してから、編集を始めましょう。

1. 基盤
   フォアグラウンドカラーに#eddf87、バックグラウンドカラーに#7f6623を設定し、フィルター> 描画 > 雲模様を選択します。
2. フィルターギャラリー
   フィルターメニューからフィルターギャラリーを開きます。フィルターギャラリーウィンドウは3つのパートに分かれています。左側のパネルはプレビュー画面、真ん中のパネルではフィルターを選択し、右側のパネルで選択したフィルターの細かい選択を行います。ブラシストロークから、ストローク（スプレー）を選択します。設定をいじってフィルターをカスタマイズしても大丈夫ですが、半径1〜25のストロークがちょうど良いでしょう。フィルターギャラリーにて、次のフィルターを選びます。フィルターギャラリーウィンドウの右下にあるアイコンをクリックし、変形メニュー> ガラスを選択します。変形度18、滑らかさ1、テクスチャーは艶消し、スケールは117%に設定するのが良いでしょう。様子を見ながら、調整を加えてみてください。
3.  最後の調整
   ゴールドレイヤーを選択し、CTRL+J (またはCMD+J)で複製します。レイヤーパレットでブレンドモードをソフトライトに変更し、透明度を70%まで下げます。

これで完成です。デザインに合わせて自由に使用できるパターンが、たった5分ほどでできてしまいます。

Illustratorで磨きのかかった金属パターンをつくる3つのステップ

続いて、Adobe Illustratorを使って輝きのある金属パターンを作る方法をご紹介します

1. 長方形をメタリックのグラデーションで作成する
   長方形ツール（M）をクリックし、Shiftキーを押しながらドラックして正方形を作ります。この時、塗りつぶしやストロークを含まないように注意しましょう。ツールパネルの下にあるグラデーションボックスを選択します。グラデーションツール（G）をクリックし、レイヤーパネル上の正方形を選択します。グラデーションパネルを開き、線状グラデーションタイプを選びます。正方形の上方から下方までグラデーションツールをドラッグし、縦型のグラデーションを作ります。この時、グラデーションパネル内には2つのカラーボックスがあるかと思いますが、3つめのカラーボックスを作りたい場合はスライダーをクリックし中央部までドラックします。ここからは、左側のカラーボックスをクリックし、カラーパネル上でカラーをR=159 G=159 B=159に変更します。右側のカラーボックスも同様に設定し、中央部は一旦R=255G=255 B=255としてください。
2.  ラインを追加する
   線ツールを選択し、水平に左から右へドラッグします。外観パネル上で、線オブジェクトを真っ黒に塗りつぶし、ストロークはなしにします。ツールパネル上でダイレクトセレクションツール（A）を選択し、線オブジェクトをAltを押しながらクリックします。こうすることで線ツールのコピーができるので、このコピーをドラックして下に移動します。ここまでのフローを、何度も繰り返してください。大体28個のオブジェクトがあれば十分でしょう。レイヤーパネル上で全てを選択し、これらを複製します。コピーしたオブジェクトを元々のオブジェクトの上に配置し、これを5回ほど繰り返しましょう。最後にこれらのオブジェクトを全てグループ化します。これらの線の間のスペースは、必ずしも均等である必要はありません。自由変形ツール（E）を選択し、１のステップで作成した正方形の中に、このオブジェクトをはめ込みます。こうすることでオブジェクトが変形し、線オブジェクト同士の間の空白スペースが無くなります。
3.  手触りを荒くする
   レイヤーパネル上で、2で作成したラインオブジェクトのグループを選択します。エフェクト＞変形＞粗面化する、と選んでください。設定は、サイズ = 1 px、絶対位置、詳細 = 1/in、ポイント = コーナーです。ここで、オブジェクト＞拡大するを選択し、線オブジェクトのカラーをR=158 G=158B=158として灰色に変更します。

いかがでしたか？これらのテクニックを習得すれば、自身のデザインに合わせて、さまざまなテクスチャーの金属パターンを自作することができます。

（翻訳：Mariko Sugita）