WEB掻っ穿じり

WEB備忘録とチャリとカメラ

画像に3DポリゴンCGにような効果をつけるジェネレーターやジオメトリックな素材・背景(マテリアルデザイン)

  category:general

最近良くみるポリゴンスタイルのイメージ効果や背景。
Illustratorでパスをなぞるのもなかなか時間がかかりますよね。

そこで簡単に効果をかけてくれるジェネレーターや、素材が手に入る情報をここでまとめてみました。

triangulate images

triangulate imagesサイトキャプチャ

サイト上に画像をアップしてプレビューを見ながら編集ができるお手軽なオンラインツール。
加工した画像は.svgにも.pngにもexportでき、ダウンロードできます。

//snorpey.github.io/triangulation/


I ♥ △

I ♥ △ サイトキャプチャ

こちらはダウンロードしてローカルで使えるツールです。
しかも、html5と.jsだけでできているので、インストールの必要はなくブラウザ上で起動し、また細かな設定もできるので、オリジナルの効果が得られます。

こちらも編集後に.svgを吐き出してくれます。

I ♥ △ サイトキャプチャ2

You can download sources here.〕からzipファイルをダウンロード。

解凍するとフォルダのなかにhtmlファイル、cssファイル、imageファイル、jsファイルが入っているので、index.htmlをブラウザで起動します。

I ♥ △ 起動画面

起動したら[ Drop your bitmap here ]のエリアに画像ファイルをドラックアンドドロップするだけ。

//somestuff.ru/filter/HTML5/I


Image Triangulator App

Image Triangulator イメージ画像

ローカルにインストールするApp、Mac/Windows環境で使えます。

Image Triangulator App編集画面

加工した内容は.pdfで吐き出されます。

//www.conceptfarm.ca/2013/portfolio/image-triangulator/


Trianglify

Trianglifyサイトキャプチャ

ポリゴンスタイルの素材を生成して.svgファイルでダウンロードできます。

//qrohlf.com/trianglify/


AWESOME LOW-POLY PSD BACKGROUNDS

AWESOME LOW-POLY PSD BACKGROUNDSイメージ

Freeで利用できるポリゴンスタイル素材、.aiファイル、.psdファイル。

//www.webdesignerdepot.com/2014/01/free-download-awesome-low-poly-psd-backgrounds/


3 GEOMETRIC BACKGROUNDS BY MICHAEL REIMER

3 GEOMETRIC BACKGROUNDS BY MICHAEL REIMERイメージ

Freeで利用できるジオメトリックスタイル素材、.aiファイル、.jpgファイル。

//enjoythefresh.com/products/3-geometric-backgrounds-by-michael-reimer-jpeg-and-ai-files/


Free Polygon Backgrounds :V1

Free Polygon Backgrounds :V1イメージ

dribbbleで公開しているポリゴンスタイル素材、.jpgファイル。

https://dribbble.com/shots/1414523-Free-Polygon-Backgrounds


5 Seamless Polygon Backgrounds

5 Seamless Polygon Backgroundsイメージ

Freeで利用できるシームレスなポリゴンスタイル素材、.psdファイル.pngファイル。

//graphicburger.com/5-seamless-polygon-backgrounds/


Seamless Polygon Backgrounds Vol.2

Seamless Polygon Backgrounds Vol.2イメージ"

Freeで利用できるシームレスなポリゴンスタイル素材、.psdファイル、.jpgファイル。

//graphicburger.com/seamless-polygon-backgrounds-vol2/