ワイヤーフレーム

作ってみた
  • ワイヤーフレームでレイアウトパターンを作成
  • カンプにするパターンの面に色塗り、レイヤーに分ける
  • Photoshop形式で書き出す

ワイヤーフレームの練習

  • 最初の段階では、既存のページをもとにブロックをつくる練習をします
  • 慣れてきたら、自分のアイデアにそってワイヤーフレームを作ります
ワイヤーフレーム制作の参考ブログ

2009-01-10 - Web Designer’s Road　Blog

キャプチャーを撮る

  • Firefoxの場合、拡張機能「Pearl Crescent Page Saver Basic 2.0」でページ全面のキャプチャーをとります
  • Chromeの場合、拡張機能「Screen Capture」で「Capture Whole Page」を選択します
キャプチャーを撮ったサイト

AFRO FUKUOKA [ONLINE] 福岡の情報ポータル＆ウェブマガジン

Illustratorでの作業

  1. キャプチャーをIllustratorにテンプレートで配置
  2. アートボードの左上を「原点」にする
  3. 長方形ツールでドラッグして、各ブロックを線で描いていく
  4. 各ブロックをレイヤーに配分する
  5. 書き出し（RGB、レイヤーを保持、アンチエイリアスOFF、Photoshop形式）



Photoshopでの作業

  1. 書き出されたファイルをPhotoshopで開く
  2. レイヤーのサムネールを「Ctrl＋クリック」でオブジェクトを選択範囲にする
  3. マーキーまでガイドをもっていくと、スナップされる
  4. それぞれのガイドを引く




IllustratorからPhotoshopへの一連の作業に自信がなかったので、わかりやすいサイトを選びました。
（テンプレートとアートボードのサイズを合わせるには？　どうやって「原点」に移動するの？　というレベル）

なんとか出来たので、次はブログの方のように、もう少し詳しいレイアウトパターンを取りたいと思います。