【無料】Webで使える！写真加工に使える定番のパターン素材を30種プレゼント

Webサイトで使用出来る背景パターンの素材を作成しました。
背景写真の上に敷く事で文字の視認性を良くしたり、雰囲気を変えたりする効果があります。

フリー素材ですので、Webサイトなどのデザインに自由にお使い下さい。

素材の基本的な設定方法

今回はホームページ制作サービス「BiNDup」を使って、ビルボード（メインビジュアル）の背景写真に用いる前提で解説します。
ポイントとしては、

1. 背景写真はビルボードエリアに設定
2. 背景パターンはブロックに指定
3. ブロックの背景色の透過度を使って視認性と色味を調整

になります。

サイトテンプレート「Kriss Vector Salon」を例に解説します。
うまくいかない場合は、テンプレートの構造を参考にしてみて下さい。

背景写真に使うときの設定方法

背景写真は
プロパティ設定＞ページデザイン＞背景画像
のビルボードに設定します。
その際、画面いっぱいに表示される様に「ストレッチ」を選択しましょう。

今回提供する背景パターンは、黒、白、赤、青、緑、橙の6色ご用意しておりますが、写真によっては色味が合わない場合があります。
その際のテクニックとして、写真自体をモノトーンにする方法を試してみて下さい。

写真をモノトーンにするには、写真をSiGNで開き、
エフェクト＞明るさ
から彩度を-255に設定する事で行えます。

背景パターンに使うときの設定方法

背景パターンはビルボードにあるブロックに設定します。
「設定」タブ内の「背景画像」に背景パターンを設定して下さい。
その際、「タイリング」を選択します。
これで背景パターンが繰り返し表示になります。

ブロックの背景色で調整

これはおまけで覚えておくと良いのですが、色の組み合わせや写真によっては、背景パターンを設定しても文字の視認性が向上しない事があります。
その場合は、ブロックの背景色と透過度を使って調整しましょう。

例えば黒い背景パターンを使う場合、「設定」タブ内の「背景色」に黒（#000000）を設定して、透過スライドを50%にしてみましょう。
写真の上に黒背景が50%で敷かれ、文字が見易くなったと思います。

素材パターンと使い方のヒントを解説

設定方法が解った処で早速背景パターンを使ってみましょう。
今回は5種類のパターンを用意しました。
また、ブロックの背景色に設定するカラーもそれぞれ記載します。

ドット（四角）

こちらはオーソドックスな5ピクセルの四角が格子状に並んだパターン。
用途限らず大体の雰囲気に合わせる事が出来るかと思います。

透過用背景色：黒（#000000）、白（#ffffff）、赤、（#cc0032）、青（#0c3b66）、緑（#1b4631）、橙（#ff9600）

ドット（丸）

こちらは丸バージョン。
少しポップさが出ますね。

透過用背景色：黒（#000000）、白（#ffffff）、赤、（#cc0032）、青（#0c3b66）、緑（#1b4631）、橙（#ff9600）

ドット（丸抜き+影付き）

これまではドットが写真に乗っているパターンでしたが、今度はドットで背景色が抜かれているパターン。
影付きなので、背景写真の上に網を乗せている様な雰囲気が出ますね。

透過用背景色：黒（#000000）、白（#ffffff）、赤、（#cc0032）、青（#0c3b66）、緑（#1b4631）、橙（#ff9600）

方眼紙風

写真の上に方眼紙風の罫線が乗る背景パターンです。
シャープに見せたり、クールな雰囲気に合いそうですね。

透過用背景色：黒（#000000）、白（#ffffff）、赤、（#cc0032）、青（#81ceda）、緑（#9bc516）、橙（#fffb01）

スライス背景

この背景パターンは繰り返さず使う想定なので、「タイリング」ではなく「ストレッチ」を選択して下さい。
四つに切り取られた様なデザインになります。
右下エリアがドット（四角）でメッシュの様な見え方になりますね。
背景写真が表示されるのは左上（メイン）と右下エリアになりますので、使用する場合は大事な要素が隠れない様気を付けて下さい。

このパターンの場合、基本的に背景色の透過は必要ありませんが、一応設定する場合のカラーコードを記載しておきます。
透過用背景色：黒（#000000）、白（#ffffff）、赤、（#cc0032）、青（#0c3b66）、緑（#1b4631）、橙（#ff9600）

如何でしたか？
ちょっとデザインに悩んだり、写真の雰囲気作りに困った時には試しに用いてみるのも良いと思います。

このくらいの背景パターンであればBiNDの画像編集ツール「SiGN」で作る事も可能なので、繰り返しで使える背景パターンを自分で作ってみるのも面白いと思います。

まずは以下よりログインし、素材をダウンロードして使ってみて下さい。

ダウンロードする