Advertisement

 

最近よく見かけるWebデザインに質感の高いテクスチャ素材を利用しているケースがあります。

そのなかでも繊細でうつくしいデザインを表現するファブリックテクスチャを利用したWebデザインに注目してみましょう。

 

海外デザインブログAcris Designで、ファブリックテクスチャ素材を利用したWebデザインを21個まとめたエントリー「Fabric Texture in Web Design」が公開されていたので、今回はご紹介します。

 

最後に実際に利用したい無料ファブリックテクスチャ素材も一緒にまとめていますのでWebデザイン制作の参考にいかがでしょう。

 

 

詳細は以下から。

 

 

ファブリックテクスチャ素材を利用したWebサイトデザインまとめ

 

Love For Japan

東北地方太平洋沖地震のチャリティーサイトのひとつで、ヘッダー部分に日本画で描かれた花柄デザインとやや汚れたようなグランジテイストをプラスしています。

 

 

Quakeroats

ファブリック素材にグランジテイストを追加した背景デザインが魅力的なWebサイトデザインのひとつ。

 

 

Coreymade

iOSで利用されているようなリネンテクスチャ素材を背景に利用したWebデザインで、レタープレス加工した巨大タイポグラフィーがクール。

 

 

Elless Design

ユーザーの注意を惹きやすい黄色をメインカラーとして利用したWebデザイン、余白スペースをたっぷりとることですっきりとしたデザインに仕上げています。

 

 

Lancaster PA Web Design

ナチュラル志向のアース色を利用したやさしい色使いのWebサイトで、背景画像として利用したファブリックテクスチャが良い味を出しています。

 

 

Label My Coffee

オリジナルのブレンドコーヒーを注文することができるユニークなサービスのWebサイト。こちらも自然をテーマにしたデザインとファブリック素材の相性がバッチリです。

 

 

Heartwood Hall

結婚式場という豪華でエレガントな雰囲気を表現したWebデザイン、トップ部分にレイアウトされたスライダーとテクスチャのバランスが絶妙です。

 

 

Netastica

やさしい色使いのファブリックテクスチャを背景画像として利用、影やレタープレスと一緒に表現することでデザインの質感をワンランクアップ。

インパクトのあるロゴデザインの作り方はこちらのチュートリアルを参考にどうぞ。

 

 

Centvingtcinq

シンプルでミニマルなWebデザインは、ファブリックテクスチャを背景画像として利用するだけで印象がガラリとかわります。

 

 

Forgotten Presidents

海外新聞風のウェブレイアウトを再現したユニークなWebサイトで、レトロなタイポグラフィーとファブリックテクスチャの組み合わせはよく利用されていますね。

 

 

Big Eye Creative

アメリカ、フロリダ州にあるデザインオフィスのポートフォリオサイトで、粗めのファブリック素材を背景に利用しています。

 

 

Interexpresso

ウッドテクスチャとファブリック素材を組み合わせたWebサイトデザイン。

 

 

Paris Jones

アーティストの楽曲をまとめて試聴、購入することができるプロモーション用サイト、少ないコンテンツを有効的、かつ大胆にレイアウトしたデザイン。

 

 

Matt Hamm

コンテンツ部分以外の背景デザインにファブリックテクスチャを利用しており、スタリッシュな印象を与えてくれます。

 

 

Carnivale du Vin

レトロな色使い、タイポグラフィーと一緒に色あせたファブリック素材を利用したWebサイトで、ナビゲーションメニューのリボンデザインがよいアクセントになっています。

 

 

Alpine Meadows

スキーリゾート地の情報をまとめたサイトで、糸がほつれた様子を再現したメニューバーとファブリック素材の組み合わせがうまいです。

 

 

ファブリックテクスチャに関連する無料素材まとめ

 

Apple iOS Linen Texture

タイトルのままですが、Apple iOSで利用されているあのリネンテクスチャをそのまま再現した素材。

 

 

Square Fabric Texture with 6 Colors

格子柄のレトロな色使いのテクスチャ素材で、6色カラーをまとめてダウンロード可能。

 

 

High Resolution Fabric Texture Pack 2

いろどり豊かな様々なファブリック素材を編み目が見えるほどマクロ撮影したテクスチャ素材9枚セット。

 

 

11 Free High Resolution Fabric Textures

上記テクスチャセットの第1弾として公開されている11枚のファブリック素材をまとめています。

 

 

Fabric Textures

お好みの色で塗りつぶした背景に重ねるだけでファブリックテクスチャの質感を表現してくれる便利テクスチャ素材14枚セット。

 

 

Photoshopでも使えるカラフルなファブリック素材の無料テクスチャ40枚まとめ

手前味噌となりますが、さまざまな種類のファブリックテクスチャ素材を集めました。

 

 

継ぎ目のないレザーやジーンズ、セーターなどのPhotoshop用洋服テクスチャパターン8枚セット

あまりファブリック素材のパターンファイルは見かけないかもしれません、背景デザインなどに利用することができそうです。

 

この他に「ファブリック素材」に関連するエントリーは以下のボタンよりどうぞ。

[button_round color=”orange” url=”http://photoshopvip.net/archives/tag/%E3%83%95%E3%82%A1%E3%83%96%E3%83%AA%E3%83%83%E3%82%AF/”] キーワード「ファブリック」をチェック ☞ [/button_round]

 

[参照元 : Fabric Texture in Web Design – AcrisDesign]