最近よく見かけるWebデザインに質感の高いテクスチャ素材を利用しているケースがあります。
そのなかでも繊細でうつくしいデザインを表現するファブリックテクスチャを利用したWebデザインに注目してみましょう。
海外デザインブログAcris Designで、ファブリックテクスチャ素材を利用したWebデザインを21個まとめたエントリー「Fabric Texture in Web Design」が公開されていたので、今回はご紹介します。
最後に実際に利用したい無料ファブリックテクスチャ素材も一緒にまとめていますのでWebデザイン制作の参考にいかがでしょう。
詳細は以下から。
ファブリックテクスチャ素材を利用したWebサイトデザインまとめ
東北地方太平洋沖地震のチャリティーサイトのひとつで、ヘッダー部分に日本画で描かれた花柄デザインとやや汚れたようなグランジテイストをプラスしています。
ファブリック素材にグランジテイストを追加した背景デザインが魅力的なWebサイトデザインのひとつ。
iOSで利用されているようなリネンテクスチャ素材を背景に利用したWebデザインで、レタープレス加工した巨大タイポグラフィーがクール。
ユーザーの注意を惹きやすい黄色をメインカラーとして利用したWebデザイン、余白スペースをたっぷりとることですっきりとしたデザインに仕上げています。
ナチュラル志向のアース色を利用したやさしい色使いのWebサイトで、背景画像として利用したファブリックテクスチャが良い味を出しています。
オリジナルのブレンドコーヒーを注文することができるユニークなサービスのWebサイト。こちらも自然をテーマにしたデザインとファブリック素材の相性がバッチリです。
結婚式場という豪華でエレガントな雰囲気を表現したWebデザイン、トップ部分にレイアウトされたスライダーとテクスチャのバランスが絶妙です。
やさしい色使いのファブリックテクスチャを背景画像として利用、影やレタープレスと一緒に表現することでデザインの質感をワンランクアップ。
インパクトのあるロゴデザインの作り方はこちらのチュートリアルを参考にどうぞ。
シンプルでミニマルなWebデザインは、ファブリックテクスチャを背景画像として利用するだけで印象がガラリとかわります。
海外新聞風のウェブレイアウトを再現したユニークなWebサイトで、レトロなタイポグラフィーとファブリックテクスチャの組み合わせはよく利用されていますね。
アメリカ、フロリダ州にあるデザインオフィスのポートフォリオサイトで、粗めのファブリック素材を背景に利用しています。
ウッドテクスチャとファブリック素材を組み合わせたWebサイトデザイン。
アーティストの楽曲をまとめて試聴、購入することができるプロモーション用サイト、少ないコンテンツを有効的、かつ大胆にレイアウトしたデザイン。
コンテンツ部分以外の背景デザインにファブリックテクスチャを利用しており、スタリッシュな印象を与えてくれます。
レトロな色使い、タイポグラフィーと一緒に色あせたファブリック素材を利用したWebサイトで、ナビゲーションメニューのリボンデザインがよいアクセントになっています。
スキーリゾート地の情報をまとめたサイトで、糸がほつれた様子を再現したメニューバーとファブリック素材の組み合わせがうまいです。
ファブリックテクスチャに関連する無料素材まとめ
タイトルのままですが、Apple iOSで利用されているあのリネンテクスチャをそのまま再現した素材。
Square Fabric Texture with 6 Colors
格子柄のレトロな色使いのテクスチャ素材で、６色カラーをまとめてダウンロード可能。
High Resolution Fabric Texture Pack 2
いろどり豊かな様々なファブリック素材を編み目が見えるほどマクロ撮影したテクスチャ素材９枚セット。
１１ Free High Resolution Fabric Textures
上記テクスチャセットの第１弾として公開されている１１枚のファブリック素材をまとめています。
お好みの色で塗りつぶした背景に重ねるだけでファブリックテクスチャの質感を表現してくれる便利テクスチャ素材１４枚セット。
Photoshopでも使えるカラフルなファブリック素材の無料テクスチャ40枚まとめ
手前味噌となりますが、さまざまな種類のファブリックテクスチャ素材を集めました。
継ぎ目のないレザーやジーンズ、セーターなどのPhotoshop用洋服テクスチャパターン8枚セット
あまりファブリック素材のパターンファイルは見かけないかもしれません、背景デザインなどに利用することができそうです。
この他に「ファブリック素材」に関連するエントリーは以下のボタンよりどうぞ。
[button_round color=”orange” url=”http://zakiyama.info/archives/tag/%E3%83%95%E3%82%A1%E3%83%96%E3%83%AA%E3%83%83%E3%82%AF/”] キーワード「ファブリック」をチェック ☞ [/button_round]
