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

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

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

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

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

1. WebFXの金属パターン（無料）

こちらはWebFXの提供する無料の金属パターンセット。8つの高画質な金属パターンが含まれており、Webサイトデザインへの使用に便利です。JPGフォーマット（4252×2835px）で、商用・私用どちらにも使えます。

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

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

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

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

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

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

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

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

6. Freepikの赤く薄汚れた金属パターン（無料）

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

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

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

8. Freepickのグリルメタルパターン（無料）

暗い色合いのグリルメタルのパターンが含まれるFreepickのセットは、AIもしくはEPSフォーマットでダウンロードできます。800×800 px、800×1200 pxの2つのサイズが用意されており、無料でダウンロードが可能です。

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

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

10. Lost and Takenの劣化した金属パターン（$0〜）

劣化した金属のパターン素材を多く提供するLost and Taken。薄汚れたもの、錆びついた感があるもの、銅製やシルバーのものなど、種類豊富な高画質パターン素材が用意されています。Webサイトのデザインに、ちょっとしたテクスチャーや薄汚れた感を入れたい際に最適です。なお、素材の購入価格はユーザーが自由に決められるようになっています（0円も可能です）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Phoroshopでゴールドメタルの金属パターンを作る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）