Webサイトの作り方概要
1．ワイヤーフレームを作成（PowerPoint）
2．全画面のデザインを作成（Photoshop）
3．スライス（Photoshop）
4．コーディング（Dreamweaver）
Webサイトの中身
HTML＋画像＋Java＋Css 等
HTMLの構成
Sample
<html>
<head>
～
</head>
<body>
<p>テキスト</p>
<img src="画像アドレス" />
<a href="リンクアドレス">リンク名</a>
</body>
<footer>
～
</footer>
</html>
スライス
- 全画面のデザインをしたものから画像ファイルを作ること（Photoshop）。
- 必要な部分が全て入るように切り取る。
- 「Web用に保存」 → Shiftキーで複数選択 → 拡張子を指定して保存
- デザイン時に画像部分・テキスト部分・タグ部分を考えてデザインすること。
バナーの作り方
決められたサイズで伝えたい情報を伝えるにはどうするかを考えること
使用したもの
・http://pixlr.com/editor/
・お手本のデザイン
・桜の写真
・桜のアイコン画像
Ⅰ お手本のデザインを見て作る
1．新規レイヤー作成、描画ツールで帯を作成
2．新規レイヤー作成、描画ツールで円を作成
3．新規レイヤー作成、描画ツールでラインを作成
4．タイプツールでキャッチコピー・文章を作成
5．桜のアイコン画像を配置
Ⅱ お手本と少し違ったデザインを作る
1．フォントの変更
2．レイヤースタイルの追加
・ドロップシャドウ（桜）
・内側のシャドウ（桜）
・アウターグロー（円）
・インナーグロー（円）
3．帯にフィルター
・ハーフトーン
Ⅲ 自由なデザインを作る
1．写真の位置を上部に
2．描画ツールで帯作成
3．フォント
4．アイコンの配置
5．写真にフィルター
・チルトシフト
改善点
バナーなので、クリックしたくなるような工夫をする。
→効果的なデザイン例を集めて参考にする。