Illustrator(イラストレータ)で、グリッドシステムのテンプレートを作ってみた

おすすめ記事ピックアップ

ちょっとチミ、チラシ作ってくれないか

中小企業の場合、通販などWeb周りの担当者は、突然チラシやパンフを明日までに作る!?ことになりがちです。「デザイナーじゃないので無理です」といっても、「客先でちょろっと見せたり配ったりできる簡単なのでいいから」という流れで、作ることになったりします。

予算も無く、何より時間が無いので外注もできません。しかも「ちょっとすぐに使うだけ。なんでも良い」という割にはコダワリがあり、それなりに見えることが要求されたります。何度も作り直したり迷ったりと、大きく時間を取られることになります。

中小企業の場合は、断るなんてもっての外ですので、一番の解決方法は、「なんでも良いけどそれなり」品質をクリアすることです。プロのデザイン品質までいかないけど、素人から見ると「ああ、まあキレイに見えるね」というレベルのやつです。

これで解決ノンデザイナーズ・デザインブック

同じような悩みを持っている方は、「ノンデザイナーズ・デザインブック」を読むことをオススメします。これがメチャクチャ役に立ちます。まさにデザインのデ。基礎のキ!を理解できるのです。


内容はシンプルで、デザイン4つの基本原則である近接、整列、反復、コントラストを教えてくれます。どんな感じに良くなるのか、下記の記事を参考にどうぞ。
デザイン4つの基本原則
http://www.tachitto.com/2012/04/blog-post_16.html
ぱっとしない履歴書をデザインする
http://www.tachitto.com/2012/04/httptachitto.html

やっぱり面倒くさいのでグリットシステム?

前置きが長くなりすいません。それでも「ノンデザイナーズ・デザインブック」を勉強しても、デザイナーじゃない人が、突然チラシやパンフを明日までに作るのは、やっぱり面倒くさいのです。それでデザイン4つの基本原則を理解した上で、A4チラシを簡単につくるための、グリットシステムのデザインの活用方法を考えて見ましたので、共有したいという記事になります。

クソ面倒くさい理由は、何を何処に配置して何をどうするのか、考えるのが面倒なんです。マス目に沿って配置すればOKなら、ずいぶん楽になります。グリットシステムについては下記記事を参考にどうぞ。
グリッドシステムって何?
http://non-designer.com/layout/layout03.html
主にWebデザインで使われていることが多いようです。一度ぐらいは見かけたことがあるはずです。これをA4チラシ上のイラストレータで、同じように使えないかと考えました。グリットデザインのテンプレートがあるはずと考え検索したのですが、まったく見つからず。。。。。なら自分で作ってしまいました。

イラストレータには、「グリットを表示」する機能があるのですが、うまく利用できませんでした。またA4サイズにちょうど良いグリットには、どのように調整すべきか悩んでしまいます。


またグリットの希望としては、こんな感じに分割エリアとそれぞれマージンを設定したいのです。このようなグリットテンプレートが欲しいのです。

鷹野雅弘がオススメするFireworks CS5の新機能から引用画像です


イラストレータでグリットシステムのテンプレート作成

まず予め、上下左右の空きサイズと、何個に分割するかを考えます。上下左右の空きは大きいほうがキレイに見えるので、15mmとします。分割は要素が6個ぐらいあるとして、6分割とします。分割ごとの隙間は、6mmとします。作業の流れは、自分でグリットを引いて、ガイドの作成でガイド化する内容となります。やり方がわかれば、3分ぐらいの作業時間です。

作業開始。上下左右の空きをつくるグリットを作成するため、長方形ツールでA4サイズと同じサイズを作ります。


その四角のサイズを幅(W)を-30mm、高さ(H)を-30mm減らします。これで上下左右15mmの空きができました。


直線ツールのなかの長方形グリットを選択します。


長方形グリットをダブルクリックします。


垂直方向の分割は6。水平方向の分割は0にします。横線があるとうっとしいので、縦線のグリットだけ作ります。好みの問題です。


6ですと、何故か7個に分割されますので、1つ減らして5が良いでしょう。


設定を5にして、もう一度やります。

はい、6分割できました。

グリットを選択してコピーします。

編集から全面ペースを2回します。3個同じ物を重ねます。

グリットを1つ選択して、X軸を-3mm動かします。線は枠のみにしておきましょう。

また1つ下のグリットを選択して、今度はX軸を+3mm動かします。これで6mmのマージンができました。

左右が当初より、ちょっとはみ出た状態になっています。ダイレクト選択ツールで左右のはみ出しを削除します。(気になるなら)。

線を全部選択して、表示から「ガイト」の「ガイドの作成」でガイド化して完成です。

あなただけのグリットレイアウトの下書きができました。

あ。たぶんデザイナーの方なら、Illustrator(イラストレータ)の定規やガイド機能を使って、もっと簡単にこういった作業をこなしているはずです。そもそも知識があれば、標準のグリットでも、同じような役割になるんでしょうね。たぶん。

素人向けということで(汗)。



いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Illustrator(イラストレータ)で、グリッドシステムのテンプレートを作ってみた
Illustrator(イラストレータ)で、グリッドシステムのテンプレートを作ってみた
イラストレータでグリットシステムのテンプレート作成する方法。
http://4.bp.blogspot.com/-zoGNkTfTAMQ/UvTV2KUqjtI/AAAAAAAAPYQ/G1k0zT_eJWQ/s1600/00001.jpg
http://4.bp.blogspot.com/-zoGNkTfTAMQ/UvTV2KUqjtI/AAAAAAAAPYQ/G1k0zT_eJWQ/s72-c/00001.jpg
ふりむけばコウホウ
http://www.furimuke.com/2014/02/illustrator3.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2014/02/illustrator3.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy