ウェブデザインB 第10回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第10回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「    」です。

前回はワイヤーフレームの制作に取り掛かり始めましたね。
今回はその続きを行なっていきたいと思います。

非常にシンプルに言えば・・・

  1. 手書きデータを下書きにする。
  2. 長方形ツールで長方形レイヤーを作り、各ブロックや各アイテムをレイアウトする。
  3. 横書き文字ツールでテキストレイヤーを作り、名称や説明を記入する。

・・・といった作業の流れです。

最終的にはワイヤーフレームの最大の役割である「色や背景素材を変えたり写真を入れたらそのままデザインとして使える」というレベルまで持っていきましょう!
そのために今回は非常に重要な工程になりますので、1時間半を丸ごとワイヤーフレームの制作に充てたいと思います。

順次状況を見にまわりますのでいつでも声をかけてください。

Photoshopの基本設定

Photoshopの基本設定から行いましょう。
まずはPhotoshopを起動し、前回途中まで制作して保存したPSDファイルを開きましょう。
ファイル名は「学籍番号-wire.psd」としていたかと思います。

ワイヤーフレームの制作

では今回もワイヤーフレーム制作作業を始めていきましょう。
まずは目安としての完成形を再度確認しましょう。

実際の案件事例 その①
デザインラフ・ワイヤーフレーム・仕組みの説明・デザイン成果物

そして、再度工程を振り返ります。

ワイヤーフレームの作り方

では下の手順の⑤⑥⑦⑧をブロックごとに繰り返して、ワイヤーフレーム制作を進めていきましょう。

ワイヤーフレーム制作手順⑤ グループ(フォルダ)を作って名前をつける

ワイヤーフレーム制作手順⑥ 下書きを見本に長方形ツールでブロックを作成

ワイヤーフレーム制作手順⑦ 下書きを見本に横書き文字ツールで文字を作成

ワイヤーフレーム制作手順⑧ 下書きを見本に移動ツールで場所移動やサイズ変更を行う

本日のまとめ

前回に引き続きワイヤーフレームの制作を進めましたが、完成までどのくらい近づいたでしょうか?

このワイヤーフレーム制作の工程時間がかかっても問題ありません
なぜならワイヤーフレームの工程後のデザインのクオリティが大きく左右されるからです。

ワイヤーフレームができていない人は「授業時間内」でも「授業時間外」でも、
時間が許す限り完成するまで付き合いますので声をかけてください。

来週からはデザイン制作に取り掛かる準備を始めたいと思っています。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE