電脳世界の空間的平面設計

現在WEBサイト制作の学校に通い勉強しています。その覚書きです。

Ilustraterでカンプを作る メモ書き

yachin29.hatenablog.com

 

カンプに戻らない

サイズを決める

 コンテンツ

 画像

 空き

 文字

 

line-heightは最悪修正が効く、画像は無理

 

タグライン

キャッチコピーとの違い

キャッチコピー 商品や、イベントに対して

企業理念のキャッチコピー版

ヘッダーに使う

ナイキ JUST DO IT

 

文章はお客さんが用意してくれるものではない

つまり文章も書けなければいけない

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーー

実践

イラストレータ

 

新規ファイルの作成(ctrl+N)

 カスタムをウェブに変更して開く

 幅1280px 高さ1500px

 詳細の 新規オブジェクトをピクセルグリッドに整合

 

containerを作る

 長方形ツールを選択

 画面ダブルクリックでダイアログが開く

 幅960px 高さ1500px と入力

 

containerを真ん中に移動

 右上 XY 基準点を左上にする

 移動距離の計算

 (1280ー960)/ =160

 てな訳で160と左上xに入力、yは0を入力 

 

グリッドの大きさを変更する

 編集 環境設定 ガイド・グリッド 

 グリッド10px

 分割数 2

 つまり最小単位は 5px

 漢字練習帳みたいになる

 

グリッドの表示

 表示 グリッド表示 で表示される

 

オブジェクト アートボード アートボードに変換

新規アートボードが作成される

こんな感じでいっぱいアートボードを作っている

 

アートボードはメモリ食い

アートボード数分のイラレを開いているようなもん

 

貰ったイラレデータを開く

ふたつ目のレイヤーを選ぶ、ロックがかかっている場合は外す

シマシマをクリックで選択できる

選択してコピー(ctrl+C)

 

compデータに新規レイヤーを作り

そのレイヤーにペースト(ctrl+V)

 

アピアランスを開く

塗の▲ 透明度クリック 100%→50%にする

 

ヘッダー

 新規レイヤー

 長方形 960 100

 

ヘッダーの中身部品

 ヘッダーを選んで

 140 80

 X490 Y10

 X600 

 

ロゴ

 60 60

 X10 Y20

 

文字を入れる

 フォントは必ずMeiryoを使うこと

 

整列

 複数選択

 メインオブジェクト決め

 

ロゴマーク

 Cを好きなフォントに選択

 整列で中央へ

 書式 アウトラインを作成(Shift+Ctrl+O)

 

contentsを作る

 新規レイヤー contents 作成

  キービジュアルを作る

   300 300

 

  ボタン

   540 50

 

文章がリンクする

文章の左上、右下の四角

文章の続きが表示される

 

 

 

常に線は無し

ガイドレイヤーは一番上にする

ガイドの位置を決めたらロックすると楽

 

幅をを960pxにする理由

色んな数で割れるから

つまり色んなデザインに対応できる為

便利

便利なだけで960pxにこだわる理由なし

960.gs