デザインカンプを作る時に便利なサイト『GRIDMAKER』
January 19, 2009
私が、Webサイトのデザインカンプを作る時に、まず始めにやることは、大きな配置を決めを行っています。電卓片手に、メインコンテンツの幅を決め、サイドバーの幅を決め、マージン(隙間)を割り出して行きます。これが面倒な作業で、なかなか折り合いが付かないことが多かったりします。
また、黄金比や白銀比(大和比)なんかを意識しだすと、もっと時間がかかってしまうことが多々あります。黄金比などは、定規を用意して(また今度このネタ書きます)それで合わせているので、最近割と楽になりましたが、大きな配置決めがなかなか上手くいきませんでした。
そこで、最近発見したこのサイトが非常に便利です。
このサイトを使ってデザインカンプの配置の方法をご紹介したいと思います。
手順
1. 編集部分にある、「Number ob columns」 でカラムの数を決めます。
2カラムで制作する場合も、2の倍数で大きめの数字を入れると良い感じです。出来れば、2と3の公倍数である12とか18とか24あたりであれば、部分的に3カラムになるレイアウトでも対応出来ます。
2. 「Column width」と「Gutter」を調整し「Total Width」を決める。
「Column width」で、カラムの幅を決め、「Gutter」でマージンを決めると、一番上部の「Total Width」が変化します。横幅が決まっている場合は、それに合わせて、調整します。
3. その他の設定を行う
全体の高さを決める「Column height」や、縦方向のグリッドを決める「Increment Every」で調整します。また色が気になる方は「Column color」や「Baseline Color」 で調整して下さい。
4. PNGファイルで書き出す
PNGファイルで書き出すことが出来ます。書き出し方は、下の方の「Export」 の「Save grid .png」を押すと、ダウンロードが出来ます。
5. ダウンロードしたPNGファイルをPhotoshopなどに配置。
PNGファイルをPhotoshopなどに配置します。
グリッドに合わせてガイドラインを引きます。
6. ガイドラインに合わせてそれぞれのパーツを配置。
先程引いた、ガイドラインに合わせながら、それぞれのパーツ(ヘッダーやサイドバーなど)を配置します。
以上で完成です。
作業時間の短縮に一役買ってくれる便利サイトだと思います。 是非お試しあれ〜。
- デザインカンプを作る時に便利なブラウザエレメント集
-
- 最近、デザインフェーズにどっぷりな、やいぶです。皆さんこんにちは。そんな中便利な、PSDを発見したので、ご紹介。 デザインカンプを作る時って、リアリティーを出す為に、ボタンや、スクロールバー、イン... MORE »
- デザインカンプを作る時に便利なサイト『GRIDMAKER』
-
- 私が、Webサイトのデザインカンプを作る時に、まず始めにやることは、大きな配置を決めを行っています。電卓片手に、メインコンテンツの幅を決め、サイドバーの幅を決め、マージン(隙間)を割り出して行きま... MORE »
- Web Designing 2008年 12月号 + MdN 2008年 12月号
-
- 本日は、天神で打ち合わせがあり、その帰りに久々に本屋さんに寄れたので、不定期購読のデザイン系の雑誌を2冊ほど買ってきました。Web Designing (ウェブデザイニング) 2008年 12月号 W... MORE »
- Photoshopで写真枠をサクっと作る
-
- 前回のエントリーに引き続きPhotoshopの小ネタです。Webでよく見かけるこんな写真枠をサクっと作っちゃいます四角い枠を書いて、その上に写真を乗っけるという方法を以前はやっていましたが、もっとお手... MORE »
- グローバルナビなんかで便利な、Photoshopで簡単な2重ラインの書き方
-
- MTネタばかり書いていると、そっち側の人だと思われるので、たまにはWebデザイナーぽいネタを。Photoshopの小ネタです。グローバルメニューでよくやるこんな感じ上と下、微妙に違うんですが分かります... MORE »
Category
このブログ記事に対するトラックバックURL
-
福岡県 福岡市在住 Webデザイナー。
1973年福岡生まれ。射手座、B型。HNは、やいぶ・Yaive など。幼少期から、モノを作ることが大好き。しかし、小学生の頃の夢は弁護士。 中学生で、漫画家を志すも、高校生時に建築に強く興味を持ちあっさり方向転換。 某デザイン系大学を経て、インテリアデザイナーになる。その後建築士の免許を取得。 建設会社で現場監督を経験、建築塗装会社で営業を経てWebマスターになる。 2006年に独立開業、BULANCOとしてWeb制作に携わる。現在に至る。
只今、コメント機能が正常に機能していません。ご意見ご要望はこちらからどうぞ。
コメントする