プログラマーな日々

プログラマーをやっています。好きなものは、C#, TaskChute Cloud, WorkFlowy, Backlog, AWSです。

グリッドの画像を生成してダウンロードできるサイト「NeatGrid」

f:id:JHashimoto:20140410094504j:plain

グリッドの画像を生成してダウンロードできるサイト「NeatGrid」を紹介します。

NeatGrid - Create pixel-perfect grids online and save them to PNG images
NeatGrid is a free online tool for UI designers to quickly create pixel-perfect grid images. ...

手順

生成するグリッドの内容を設定

f:id:JHashimoto:20140410094519p:plain

Grid Size

Gridの行数と列数です。

Cell Width

セルの幅です。

Cell Height

セルの高さです。

Cell Color

セルの色です。

Secondary Cell Color

チェック模様のGridにする場合、セルの色をもう1つ指定します。

Guitter Size

罫線のサイズです。

Guiter Color

罫線の色です。

Margin Size

画像の4隅に設けるマージンのサイズです。

Margin Color

マージンの色です。

スクリーンショットの[※]

設定値を連動して変更させるか、独立して設定するかを指定できます。

Grid Settings

または、[Grid Settings]からすでに用意されている設定を選ぶこともできます。

f:id:JHashimoto:20140410095024p:plain

画像を生成しダウンロードする

f:id:JHashimoto:20140410095457p:plain

[Render]をクリックする

[Render]をクリックすると、生成された画像がプレビューされます。

[Download]をクリックする

[Download]をクリックすると、画像をダウンロードできます。