グリッドの計算がすばやくできる便利なツール

最近、ひじがかさついているatsushiです。:oyaji:

Photoshopでウェブページをデザインする時ってどんな風にはじめますか?

私は、カラム数を決め、その幅に応じてだいだいの部品の大きさを決めるグリッドを使ったデザインをしています。

グリッドデザインは、安定感のあるデザインができるのが一番のメリットだとおもいますが、たとえば、メインコンテンツ部分の幅が680pxになった時、680pxを3カラムにわけたい。なんてことになった時に1カラムの幅をいくつにしてカラムとカラムの間のスペースをいくつにして…なんて計算をいちいちしなければいけないんです。:kero1:

そんな時に使えるのがご紹介するツールです。

Grid Designer 2

このツールを使えば、カラム数と幅、余白(カラムとカラムの間)、マージンを入力すると自動で最適な幅を作ってくれます。:wa-i:

またページ上部の「Typography」をクリックすると出来たカラムの幅で文字を入力したイメージを見ることもできます。

ただし英語なんで日本語サイトのデザインには、参考程度にしかならないかも。:baikin_2:

個人的には、グローバルナビゲーションのボタンの幅を決めるときに役立つツールだなぁと思ってます。

また、「Export」でCSSも書き出すこともできるようになってます。:cat_5:

一度使ってみてはいかがでしょうか?:sayonara:

トラックバックURL

コメントを残す

メールアドレスが公開されることはありません。