Webサイトの背景に使えるパターン素材を簡単に作れるサイト12選!

2015/02/08

こんにちは。
今回はWebサイトの背景に使えるパターン素材を簡単に作れるサイト12選!です。

Webサイトの背景に使えるジェネレータをまとめてみました。
どれも海外のサイトですが、分かりやすい作りになっています!

Webサイトの背景に使えるパターン素材を簡単に作れるサイト12選!

Transparent Textures

background_pattern_generator

http://www.transparenttextures.com/

テクスチャパターンが作れます。
左カラムのカラーピッカーから色を選び、パターンを選べばCSSが生成されます。
画像もダウンロード可能です!

 

 

Stripe Generator

stripe_generator

http://www.stripegenerator.com/

シンプルなストライプパターンが作れます。
作ったパターンの画像をダウンロードできます。

 

 

Tartan Designer – Tartan Maker

background_pattern_generator2

http://www.tartanmaker.com/

タータンチェックのパターンが作れます。
色やサイズ等を変更すると右の画像が「make it!」となりますので、画像をクリックすると変更が反映されます!

 

 

NoisePNG

background_pattern_generator3

http://noisepng.com/

ノイズのパターンが作れます。
色、サイズ、強さ、透明度を設定し、「Noise!」のボタンをクリックし、「click here」で画像をダウンロードする事ができます!

 

 

Patternify

background_pattern_generator4

http://www.patternify.com/

ドットパターンが作れます。
左側の設定を変更して右側で画像をダウンロード、CSSをコピーできます!

 

 

Striped Backgrounds

background_pattern_generator5

http://stripedbgs.com/

縦のストライプパターンが作れます。
色をランダムで育成する事が可能で、もちろん色を指定する事もできます。
「Download」ボタンで画像をダウンロードする事ができます。

 

 

bgpatterns.com

background_pattern_generator6

http://bgpatterns.com/

イラストや柄等のパターンが作れます。
右のメニューでパターンを作り、矢印のアイコンで画像をダウンロードします。

 

 

Background Image Generator – SiteOrigin

background_pattern_generator7

http://bg.siteorigin.com/

様々なパターンが作れます。
「Download」ボタンで画像をダウンロードします。

 

 

Dotted Background Generator

background_pattern_generator8

http://www.pixelknete.de/dotter/

ドットパターンが作れます。
「Download」ボタンがないので、右クリックで背景画像を表示して保存でいいかと。

 

 

Noise Texture Generator

background_pattern_generator9

http://www.noisetexturegenerator.com/

ノイズテクスチャパターンが作れます。
「Download now!」ボタンで画像をダウンロードします。

 

 

Stripemania

background_pattern_generator10

http://www.stripemania.com/

こちらもストライプパターンが作れます。
「DOWNLOAD THIS STRIPE」ボタンで画像をダウンロードします。

 

 

Patternizer

background_pattern_generator11

http://patternizer.com/

HTML5 Canvasでストライプ等のパターンが作れます。
「patternizer.js」をダウンロードし、デモを参考に設置します。
サイトのCODEタブをクリックするとコードをコピーできます!

 

 

いかがでしたか。他にもいいのがあったら教えて下さい!
以上でWebサイトの背景に使えるパターン素材を簡単に作れるサイト12選!でした。

topへ戻る