ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

Illustrator005 デザインカンプの書き方

デザインカンプの書き方

f:id:neko_kick_panch:20170531013815p:plain
f:id:neko_kick_panch:20170531013828p:plainf:id:neko_kick_panch:20170531013840p:plain


■ポイント
・pxで設計するためカンプができたら実装はただの作業になる。
・ファイル新規作成の際に「ピクセルグリッドに整合」を外す
・一番最初にコンテナーにあたる一番大枠を長方形ツールで描く。
 →オブジェクトは「cmd+5」でガイドに変換。表示>ガイドロック解除。
 →(ダイレクト)選択ツールを利用し、ガイドの辺をpx単位で,正確に下へ横へとコピーしていく。

・ガイドはオブジェクトを吸着させる。吸着は「表示>スマートガイド」
・borderのpxサイズに注意。+-5pxを考慮してガイド作成する。
・挿入画像(.psd)は、オプションチェックはなしでpsdを配置。
 左上アンカーポイントでぽちっ!
・画像配置で、親オブジェクトを起点に画像を一致させる方法
→両方選択ツールで選択。基準ボックスを選択。整列ツールで整列。


■参考
IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版) - DTP Transit
https://bge.jp/web-illustrator/
イラレでWebデザインってほんとにできるの? | Adobe Creative Station