Photoshop講座

【第４章】WEBデザイン

https://www.youtube.com/watch?v=dJHygWtPp2c

「ワイヤーフレームの作成1」

今回の章では「ワイヤーフレームの作成1」について説明を行っていきます。

ワイヤーフレームとは、ウエブページ構成の設計図のことです。
制作するウエブサイトの構成要素を洗い出し、レイアウトしていく構成になります。
家を建てる時の設計図のイメージでドリームウエブ講座では、
手書きワイヤーフレーム設計図を書いていただきましたが
今回はフォトショップを使って、作成していきます。
呼び込みのサイトもワイヤーフレームを使って作成したものです。

みなさまにも、ウエブプリによるサイト作成まで
覚えていただきたいと思います。

それでは、始めましょう。

第４章のPSDファイルを開きましたら、レイヤーパネルの中の
ワイヤーフレームのフォルダーを開いてください。
こちらを使用して説明していきます。
フォルダーの中には、ヘッダー、グローバルメニュー、
左コンテンツ、右サイドメニューと4つの構成レイヤーがあります。
ウエブクリサイトをワイヤーフレームで表したものです。
まずはこのように、大まかなサイトカラムを作成して
構成をしていきます。

各セクションは、長方形ツールと文字ツールで作成しています。

今回はここまで作成していきましょう。