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

WEBCRE8TOR.COM

ウェブデザインB 第4回

webdesignb04

ウェブデザインB 第4回

前回はみんなに描いてもらったデザインラフを、チェックポイントをもとにチェックを行いました。具体的には以下のチェックポイントです。

これらのチェックポイントだけで見直しても100点満点のデザインラフはなかなかないと思いますが、それでもとてもいいものを描いている人が何人もいました。

さて、今日はそのデザインラフを使って、「ワイヤーフレーム」というものを作っていきます。

ワイヤーフレームの制作

前回、前々回とトップページのデザインラフを作りました。
今回はそれを、「ワイヤーフレーム」に落とし込みます。
さて、この「ワイヤーフレーム」とは何か?

ワイヤーフレームとは?

ちょっと分かりにくいかもしれませんが、これがワイヤーフレームです

lesson04_1

キャンバス上に四角形テキストが配置されてますね。
一言で言うと、「ページ上の間取り図」のようなものです。

これを使ってレイアウトを作り、ブラウザで見た時に、実寸でどんなサイズなのかpixel単位で確認できます。前回、前々回と手書きラフを作ってもらいましたが、今度はそれを「設計図=ワイヤーフレーム」に書き換えます。

今回はデザインラフをワイヤーフレームに清書する作業を行います。
ということで、Photoshopでワイヤーフレームを作りましょう。

ちなみに手書きで作ったデザインラフはPhotoshopで作り込む事になるので、ワイヤーフレームは実寸のサイズを考えてしっかり作り込んでください。

では制作にあたっての準備を行います。

Photoshopの基本設定

この講義の第1回目ではAdobe Photoshopを使いやすくするための各種設定のお話をしましたね。
今回も設定を行いますので、Photoshopを起動してください。

教室のPCはシャットダウンするたびに毎回初期化されてしまって設定が消えてしまうために毎回起動後に以下の設定をしなければいけません。

そして、今度はワイヤーフレームを作るPSDを用意します。

  1. Ctrl + N で新規ファイルを用意し、幅1200px、高さ1000px、カラーモードRGBカラー8bit、カンバスカラー透明に設定。
  2. OKをクリック。
  3. まず左右のガイドを作る。Ctrl + Rで定規を表示して、Shift + マウスのドラッグでガイドを引く。

時間を取りますので、準備が終わった人から自分の手書きデザインラフをワイヤーフレームとして清書する作業を始めてください。見本は上の画像です。

実際に作業している状態のものを見せます。
それが以下のもの。

以上です。
少しはイメージできたかな??

「これをしたいけどできないから教えて欲しい」などはどんどん言ってください。
言ってくれないと何も教えてあげられません。

ワイヤーフレームはWebサイト制作の基本中の基本

ワイヤーフレームできましたか?正直先生はあまり作りません。
けどワイヤーフレームはWebサイト制作の基本中の基本なので覚えておいて損はありません。

ではこのワイヤーフレームを制作したPhotoshopのPSDファイルに名前をつけて保存を行ってください。
ファイル名は「wire-自分の学籍番号」にしてください。

注意点として、自分が管理できない場所にデータを保存してしまうと、PCの再起動時に削除されてしまう恐れがあります。自分が管理できる場所にデータを保存してファイルをなくさないようにしてください。

Photoshop 実践 その2:ペンツールで切り抜き(続き)

さて、先週は時間がなくてできなかった「」の切り抜きを行いましょう。

Photoshop 実践 その2:ペンツールで切り抜き(続き)

余裕があったこれもやりたい

切り抜き③ 交通事故10日前後のむち打ち(損傷)症で苦しむ男性

素材URL:交通事故10日前後のむち打ち(損傷)症で苦しむ男性|フリー写真素材・無料ダウンロード-ぱくたそ

切り抜き前

-shared-img-thumb-OMG151018200I9A1845_TP_V

切り抜き後

OMG151018200I9A1845 0.14.48

・・・時間が余ってたらやりましょうw
ポイントは髪の毛を切り抜く方法です。こちらの解説は次回にします。

本日のまとめ

今回からワイヤーフレームの制作に取り掛かりましたが、簡単に理想形を言うと、「完成デザインの着色前の段階」、いわばワイヤーフレームは完成デザインの土台です。

ここで設計ミスをしてしまうと後々の修正が大変になりますので、じっくりと作りこんでみましょう。

もちろんそのまま本デザインに移行するので実寸のサイズを考慮して作らなければいけませんが、Photoshopのようなツールのいいところは何度でも作り直しができるところです。

自分が書いた手書きデザインラフを、思い描く完成形に少しでも近づけるために、よくにらめっこしながらワイヤーフレームを作っていくといいと思います。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE