WEBサイトの背景選びに困ったらフォトショップの背景パターンから探すと良い!

PR

WEBサイトの背景って結構重要です、シンプルに白で決めるのも良いですが、サイトに印象を付けたい時や単色では物足りない時には背景にパターン画を使うことで継ぎ目のない背景を実現することが出来ます。そこで便利なのがフォトショップ等のパターン素材を利用する事です。パターンをJPGファイルやPNGファイルにすることで簡単にWEBサイトに継ぎ目のないパターン画を敷き詰めることが出来ます

 

背景に使えるGOODなフォトショップのパターン

Previa

http://sakuranalukami.deviantart.com/art/Motivos-Wood-408535610

 

Preview

http://julieta7599.deviantart.com/art/Simple-Clarity-1-Patterns-400559049

 

Preview2

http://radiantday.deviantart.com/art/Halloween-Patterns-Clari-408501775

 

5_free_seamless_icon_patterns

http://www.bestpsdfreebies.com/freebie/5-seamless-icon-patterns/

 

Softly Plaidly- Preview

http://kittenbella.deviantart.com/art/Softly-Plaidly-Peachy-Keen-101127396

 

フォトショップのパターンを探すならこのサイトが便利!

フォトショップ系の情報を発信しているサイト PHOTOSHOP VIP
http://photoshopvip.net/archives/tag/pattern

 

色々な画像素材を探せるコミュニティーサイト DeviontART
http://www.deviantart.com/resources/applications/patterns/

 

量は少なめだがいい素材 Best psd Freebies
http://www.bestpsdfreebies.com/category-freebie/patterns/

 

他にもたくさんのフォトショップのパターン情報があります Googleで検索するとわんさか出てきますよ!

 

パターンをCSSでも実現!

なんとCSSだけで背景パターンを作っちゃうことができるコードを配布しているサイトもあります

CSS Patterns Gallery
http://lea.verou.me/css3patterns/

CSSのコピペだけで背景のパターンができる ~CSS3 Patterns Gallery~ (3)

 

CSSのコピペだけで背景のパターンができる ~CSS3 Patterns Gallery~ (6)

 

CSSのコピペだけで背景のパターンができる ~CSS3 Patterns Gallery~ (4)

 

CSSのコピペだけで背景のパターンができる ~CSS3 Patterns Gallery~ (5)

 

CSS-CSS3-Patterns-Gallery-7

 

結構な種類のパターンがあり、コピペで使えちゃうのでとても便利!
さらに、パターンの種類は日に日に増えていっています

 

 

無料で使える素材化がかなり転がっているので、WEBサイトの背景をちょっとお洒落にしたいな!とか、なんか物足りないなって時にフォトショップのパターンから探してみるのがいいかもしれませんよ

フォトショップ持ってないので、パターン画使えません・・・という方はGIMPというフリーの画像編集ソフトを少しカスタマイズすることで、フォトショップのパターンを飛来とjpgたpngとして保存することが出来ます

 

GIMPで使う方法は以前こちらで紹介しました
GIMP2.6でPhotoshopのパターン(.pat)を画像として開き利用する

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー