WEB、始めました

半年間WEB制作の学校に通います。その記録。

41日目 ワイヤーフレーム

他のサイトからどんな構成(ワイヤーフレーム)でサイトを作っているのか研究


Illustrator


新規
Web 1024px

ファイル→配置

webサイトからスクリーンショットしてもってきたファイルを選択(テンプレートのみにチェックをいれる)

ファイル→ドキュメント設定→アートボード編集
上下の位置を合わせて移動ツールに持ち替えてクリックすると確定される

表示→ピクセルプレビュー

f:id:chawannmusi:20160328011845p:plain

レイヤーをコンテンツ分用意し面積の大きいところから四角を描く
photoshopでガイド線を引くため



このとき四角のサイズ縦横が必ず偶数になるようにすること





container

f:id:chawannmusi:20160328012229p:plain



footer

f:id:chawannmusi:20160328014014p:plain



nav

f:id:chawannmusi:20160328014247p:plain



header

f:id:chawannmusi:20160328014628p:plain



content
sidebar

f:id:chawannmusi:20160328014920p:plain




f:id:chawannmusi:20160328015021p:plain

すべての四角が描けたらレイヤー全てを選択して
ファイル→書き出し

psdで保存
オプション画面が開く

f:id:chawannmusi:20160328015302p:plain

RGB
スクリーン72
アンチエイリアスなし でOK





Photoshop

書き出したファイルをPhotoshopで開きガイドの線をひく
レイヤーを選択してから引くとするとスナップが効いてくれる

f:id:chawannmusi:20160331140728p:plain