4月21日 授業内容(カンプ制作)

とりあえずカンプは色はなるべく入れずに白黒の状態で作る(クライアント側から色で判断されるのを避ける為)

yachin29.hatenablog.com


設定を変更する
f:id:paris1204:20160421160625p:plain
f:id:paris1204:20160421160634p:plain
f:id:paris1204:20160421160723p:plain

新規作成
1280 x 1500
縦向き
新規オブジェクトを新規オブジェクトをピクセルグリッドに整合
f:id:paris1204:20160421160809p:plain

表示→ピクセルプレビューにチェックを入れる。(綺麗に作る為)

control + ¥でピクセルグリッドをその都度出したり消したりする。

長方形ツールで960px x 1500pxの長方形を作る
以下のように設定して長方形を真ん中にする。
f:id:paris1204:20160421162210p:plain

f:id:paris1204:20160421162240p:plain

アートボード2を選択した状態で表示→定規→アートボードを選択する

f:id:paris1204:20160421163941p:plain

f:id:paris1204:20160421162732p:plain


ダウンロードしたデータの下の写真の分だけ開く
f:id:paris1204:20160421165041p:plain

開いたデータの真ん中のレイヤーの鍵マークを外す。
f:id:paris1204:20160421165507p:plain

選択ツールで全体を選択し、コピーして元のデータで新規レイヤーを作ってペーストする。
グリッドの基準位置を変形を押してパネルを出して、x軸、y軸ともに0にする。
f:id:paris1204:20160421165054p:plain

f:id:paris1204:20160421165138p:plain



新しいレイヤーを6つ作って、それぞれ以下の大きさの四角形を作って変形のところからx地点を0にする。y地点は適宜。
header 960 x 100

main 入力なし

menu 960 x 460

info 入力なし

map 960 x 200

footer 960 x 80



以下の見本と同じようなデザインに仕上げていく
※テキストは講師のブログから引用する
基本の文字の大きさは16pxでmacの場合の文字はヒラギノにする。
大きい場所はサンプルと比較して調整する。
中心に寄せる時は寄せたいオブジェクトと基準にしたいオブジェクトを選択した状態しその上基準にしたいオブジェクトをクリックし、太い線を表示する。
その状態で整列ツールを使って中心に整列させる。
x軸の位置を揃える時は、ペーストしてきたグリッドを基準にすること。(グリッド間の幅20px, グリッド60px)

それぞれの作業が終わった時点で必ずレイヤーに鍵をかけること

f:id:paris1204:20160421181005p:plain

header
headerのロゴが入るところの幅、高さは80px
行間はフォトショップと同じように文字を選択した状態でalt + 上下の矢印もしくは下の写真の選択されているところの数値を変更して調整する。
f:id:paris1204:20160421181509p:plain

文字の横にある四角形の幅は140 x 80 でこれを3つ間隔を20pxにして中心に整列させる。


main


講師ブログからテキストを引用し

大きさ、行間を適宜調整し、下にテキストと同じ長さの長方形、右側に300 x 350 ぐらいの写真をphotoshopで加工して貼り付ける。
位置はグリッドを基準に合わせること



自分で作ったカンプの完成形
f:id:paris1204:20160530124949p:plain